准备

本插件使用最新的Flutter SDK 环境(Channel beta, 2.5.0-5.3.pre) 和 最新的 Dart SDK( 2.14.0-377.8.beta),学习这套框架前,必须有对Flutter框架大概的了解和一定的基础,并使用过Provider、了解Dart 相关语法等,如果这些都具备,后续阅读我会认为你已经具备这些条件,后续遇到问题,请通过QQ708959817 联系作者(1小时内没有回复或自行解决)

安装插件

在项目的./pubspec.yaml 中添加下面内容

dependencies:
  base_plugin:
    path: ../

然后在控制台中运行下面的命令,将插件包拉取下来

flutter packages get

目录结构

良好的目录结构,可以有效提高我们的开发效率,建议的目录结构如下:

├── lib
│   └── app.dart            # 程序声明相关内容
│   └── main.dart           # 程序运行声明(初始化,状态栏基础设置等)
│   ├── src
│      ├── base_plugin      # 重写应用相关配置
│      ├── common           # 主题,字体,颜色等声明
│      ├── config           # 全局配置相关
│      ├── entity           # 实体类相关
│      ├── http             # 网络请求相关
│      ├── page             # 页面
│      ├── provider         # 逻辑处理与页面绑定相关
│      ├── router_gen       # 路由相关
│      ├── utils            # 工具类相关
│      ├── views            # 适配相关的View
│      ├── widgets          # 自定义业务Widget

框架代码声明

在开始运行项目时,我们需要更改已有的项目,修改为如下代码:

./lib/main.dart

import 'package:base_plugin/base_plugin.dart';
import 'app.dart';

void main() {
  //启用应用
  runProviderApp(
    initGlobal: () async {
      // 初始化配置
    },
    builder: (context) => App(),
    shouldRebuild: (Map<String, dynamic> previous, Map<String, dynamic> next) {
      // 当全局变量哪个更改时,需要刷新应用需要返回true,不刷新则返回false
      return true;
    },
  ).then((value) {
    //启动完应用需要运行的代码,例如:设置状态栏图标为明亮色
    StatusBarUtils.setLightStatusBarIcon();
  });
}

./lib/app.dart

import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/material.dart';

class App extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
        localizationsDelegates: [
          GlobalMaterialLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
// 内置了一些网络请求出错的提示语,加载失败的加载按钮文本等国际化
          RProviderLocalization.delegate,
        ],
        routerDelegate: RRouter.delegate, // 结合r_router插件使用路由声明
        routeInformationParser: RRouter.informationParser, // 结合r_router插件使用路由声明
        supportedLocales: [ // 支持的语言
          Locale('en'),
          Locale('zh'),
        ],
        debugShowCheckedModeBanner: false, // 设置不显示debug banner
      );
  }
}

可以看到,首页是使用r_router 插件进行处理的,详细使用,可以查看 r_router的文档

这里作为示例工程,可以在加载配置的时候添加路由,代码如下:

./lib/main.dart

import 'package:base_plugin/base_plugin.dart';
import 'app.dart';

void main() {
  //启用应用
  runProviderApp(
    initGlobal:  () async{
     // 初始化配置
    // new 
      RRouter.addRoute(NavigatorRoute(
        '/',
        (context) => Scaffold(
          appBar: AppBar(
            title: Text('示例工程'),
          ),
        ),
      ));
    // new
    },
   //..
  ));
   
}

启动应用看到如下图即可:

图片[1]专注Flutter相关技术及工具使用专注Flutter相关技术及工具Flutter经验之谈
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片