Flutter3.0 仿微博瀑布流 - 项目搭建

项目地址

github.com/XinleZhou20…

有疑问请关注公众号 fullstack2022，答疑：

Flutter版本

项目引入插件清单

插件功能在注释中给出，具体使用在下面具体功能中详述。

pubsprc.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  get:                                 #GetX框架
  flutter_parsed_text:                 #解析微博@ url #等富文本
  dio:                                 #网络请求
  oktoast:                             #toast展示
  video_player:                        #视频播放
  cached_network_image:                #网络图片请求
  pull_to_refresh_flutter3: ^2.0.1     #下拉刷新，上拉加载更多

dev_dependencies:
  flutter_test:
    sdk: flutter
  build_runner:                        
  json_serializable:                  #json序列化工具
  retrofit_generator:                 #生成网络请求类模板

项目入口

Flutter项目的入口在main.dart中：

main.dart
void main() {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(createApp());
}

使用runApp()函数启动一个App。createApp()函数是另一个文件app.dart中函数：

app.dart

Widget createApp() {
  return OKToast(
      dismissOtherOnShow: true,
      child: GetMaterialApp(
        debugShowCheckedModeBanner: false,
        initialRoute: Routes.HOME,
        getPages: AppPages.pages,
      ));
}

可以看出使用OKToast这样的StatefulWidget作为最上层的父Widget。如此使用的目的在于，在程序的任何地方都可以直接使用

showToast()

进行Toast展示。
Toast的child便是GetX框架提供的GetMaterialApp。这里用到它的两个属性initialRoute和getPages。initialRoute定义了整个App的入口路由，而getPages则定义了App的所有页面。
我们来看看整个App的路由和页面定义，在app_pages.dart文件中：

app_pages.dart

abstract class AppPages {
  static final pages = [
    //主页
    GetPage(name: Routes.HOME, page: () => HomePage(), binding: HomeBinding()),
  ];
}

abstract class Routes {
  static const INITIAL = '/';

  static const HOME = '/home';
}

可以看到目前整个App中只有一个页面和路由，即HomePage微博瀑布流页面。HomePage如何去创建，将在下面的小节中介绍。

项目目录

项目的入口介绍完了之后，我们需要总体的看一下项目的目录结构：

那么接下来的小节，我们将按照项目功能的需要，来一一完善每一个目录。