flutter_example

flutter code

update log

运行项目

请使用最新版本的flutter运行demo

18.6.3

新增Tab

18.5.19

新增BannerWidget轮播图

18.5.14

去掉new以及const关键字

项目地址

Flutter示例集合

项目blog

初始化项目和闪屏页
添加Tab和Drawer
列表页完善,网络请求
列表详情页

flutter

github地址
官方地址
官方文档地址
Flutter中文开发者论坛
中文文档

blog

Flutter番外篇:Dart
第一章：什么是Flutter
第二章：安装Flutter
第三章：编写一个FlutterApp
第四章：框架预览
第五章：Widget目录
第六章：面对Android开发的Flutter说明
第七章：面对ReactNative开发的Flutter说明
第八章：手势
第九章：动画
第十章：布局约束
第十一章：处理 assets 和 图像
json序列化

flutter_tab_widget

使用方法

适用于嵌套Tab.

  final List<TabEntity> entity = [
    new TabEntity(title: '直播'),
    new TabEntity(title: '视频'),
    new TabEntity(title: '播报'),
  ];
  
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text('Flutter TabWidget'),
         elevation: 0.0,
       ),
       body: TabWidget(
         onPageChanged: (position) {
           print(position);
         },
         children: <Widget>[
           Container(color: Colors.white, child: Center(child: Text('直播'))),
           Container(color: Colors.pink, child: Center(child: Text('视频'))),
           Container(color: Colors.blue, child: Center(child: Text('播报'))),
         ],
         entity: entity,
       ),
     );
   }

flutter_banner_widget

使用方法

继承BannerEntity,实现两个方法

示例：

class SimpleEntity extends BannerEntity {
  final String obj;
  final String url;
  final String title;

  SimpleEntity({this.obj, this.url, this.title});

  @override
  get bannerUrl => url;

  @override
  get bannerTitle => title;
}

或者：

class SimpleEntity extends Object with BannerEntity {
  final String obj;
  final String url;
  final String title;

  SimpleEntity({this.obj, this.url, this.title});

  @override
  get bannerUrl => url;

  @override
  get bannerTitle => title;
}

widget:

 BannerWidget(entity: entity)

加载本地图片

实现build方法，返回对应的widget

  BannerWidget(
              build: (position, entity) {
                return Image.asset(entity.bannerUrl, fit: BoxFit.cover);
              },
              entity: localEntity,
            )

点击事件

BannerWidget(
            entity: entity,
            bannerPress: (position, entity) {
              SimpleEntity bannerEntity = entity;
              print('position:${position},entity:${bannerEntity.obj}');
            },
          )

flutter_zhihu_zhuanlan

目前没有比较好的办法加载一段html代码,只能以text的形式直接显示

flutter_codekk

目前codeKK-Android的功能已经使用flutter全部实现

项目因为使用了json_serializable,但是没有提交自动生成的文件,需要在运行之前执行flutter packages pub run build_runner build 否则entity目录会报错

因为flutter处于急速更迭中,有时候会和插件有冲突,为了防止这种事情发生,提交.g文件

布局的几种模式可以查看StatusWidget,截图只展示ERROR