# flutter_wan_android

**Repository Path**: binbin0915/flutter_wan_android

## Basic Information

- **Project Name**: flutter_wan_android
- **Description**: 玩Android Flutter版本
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 4
- **Created**: 2021-05-19
- **Last Updated**: 2021-05-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## WanAndroid Flutter版本

### 前言
WanAndroid Flutter 是基于 [wanandroid](https://www.wanandroid.com/) 开源Api开发的一款Flutter应用。
旨在学习Flutter2.0常规需求的开发，以及常用框架的学习：


* dio
* fluro
* json_annotation
* shared_preferences
* event_bus
* provider
* cached_network_image
* flutter_swiper
* webview_flutter
* permission_handler


### 一、Dart语言学习
[dart官网](https://dart.cn/)

[代码开发规范](https://github.com/alibaba/flutter-go/blob/master/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md)

### 二、Flutter基本控件学习
[Flutter中文网](https://flutter.cn/)

[Flutter实践](https://book.flutterchina.club/)

[pub.dev](https://pub.dev/)

### 三、网络请求Dio
参考 arch 下的 ``http_manager`` 文件封装

### 四、资源管理
1、图片。使用插件 ``flutter-img-sync`` 生成类似Android R文件
https://plugins.jetbrains.com/plugin/12585-flutter-img-sync

2、文本，颜色等可以放到一个类里，参考 ``res/colors``、 ``res/strings``

### 五、Json序列化与model生成

1、导入库
```
dependencies:
  json_annotation: ^4.0.0

dev_dependencies:
  build_runner: ^1.0.0
  json_serializable: ^4.0.0
```

2、编写原始model，可以参考 ``model/article.dart``, 也可以[json字符串自动生成model](https://caijinglong.github.io/json2dart/index.html)

3、执行生成命令，生成结果参考 ``model/article.g.dart``
```
flutter packages pub run build_runner build
```

### 六、路由
* [基本路由Navigator使用](https://book.flutterchina.club/chapter2/flutter_router.html#_2-2-1-%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%A4%BA%E4%BE%8B)

* fluro 路由框架
1、导入库
```
fluro: ^2.0.3
```

2、配置路由 参考routes下的 ``routes`` 和 ``routes_handler``
```
class Routes {
  static String root = "/";
  static String web = "/web_page";
  static String index = "/index";
  static void configureRoutes(FluroRouter router) {

    router.notFoundHandler = new Handler(
        handlerFunc: (BuildContext? context, Map<String, List<String>> params) {
         print("ROUTE WAS NOT FOUND !!!");
    });

    /// 第一个参数是路由地址，第二个参数是页面跳转和传参，第三个参数是默认的转场动画
    router.define(root, handler: rootHandler, transitionType: TransitionType.cupertino);
    router.define(index, handler: indexHandler, transitionType: TransitionType.fadeIn);
    router.define(web, handler: webHandler, transitionType: TransitionType.cupertino);
  }
}
```

3、创建全局Router并配置
```
class Application{
  static late FluroRouter router;
}

// 注册 fluro routes
void main() {
  FluroRouter router = FluroRouter();
  Routes.configureRoutes(router); // Routes参考 routes/routes
  Application.router = router;

  runApp(MyApp());
}

MaterialApp(
    title: 'Welcome to Flutter',
    onGenerateRoute: Application.router.generator,
)
```

4、使用参考 ``routes/route_util.dart``

### 七、Provider使用（以切换主题为例）
1、定义类 with ChangeNotifier

```
class WTheme with ChangeNotifier {

  static ColorModel light = ColorModel(
    background: WColor.bg_light,
    ……
  );

  static ColorModel black = ColorModel(
    background: WColor.bg_dark,
    ……
  );

  ColorModel current = black;

  switchTheme() {
    current = current == light ? black : light;
    notifyListeners(); // 通知更新
  }
}
```

2、配置Provider
```
// 配置，这里配置到App上；其他部分使用的Provider可以配置到某个页面
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => WTheme()),
      ],
      child: MaterialApp(
        title: 'Welcome to Flutter',
        navigatorKey: Application.navGK,
        onGenerateRoute: Application.router.generator,
        builder: EasyLoading.init(),
      ),
    );
  }
}
```

3、使用
```
Container(
  color: context.watch<WTheme>().current.background, // 使用watch 会监听变化
  child: Column()
)

// 可以使用扩展简化使用
extension whteme_provider_context on BuildContext {
  /// 扩展属性
  ColorModel get wTheme => this.watch<WTheme>().current;
}

Container(
  color: context.wTheme.background, // 使用watch 会监听变化
  child: Column()
)

// 修改主题
context.watch<WTheme>().current.switchTheme()
```
### 八、其他
github.com/zhaobozhen/LibChecker

构建web https://blog.csdn.net/u010568616/article/details/115241609