flutter 2.x and getx v4.x template

Last update: Jun 21, 2022

flutter_getx_template

Language: 中文简体 | English

visitors null safety flutter version getx version

基于getx 实现的全新flutter getx 模版,适用于中大型项目的开发。

  • 💥 flutter最新版本的空安全
  • 🍀 view逻辑 完全解耦
  • viewstate 自动响应
  • 📦 dioshared_preferences等通用模块的封装
  • 🔥 context

环境

Flutter 2.2.0 • channel stable • https://github.com/flutter/flutter.git
Framework • revision b22742018b (3 weeks ago) • 2021-05-14 19:12:57 -0700
Engine • revision a9d88a4d18
Tools • Dart 2.13.0

lib目录划分

  • common

此目录用来存放通用模块及其变量,例如colorslangsvalues等,例如:

├── colors
│   └── colors.dart
├── langs
│   ├── en_US.dart
│   ├── translation_service.dart
│   └── zh_Hans.dart
└── values
    ├── cache.dart
    ├── storage.dart
    └── values.dart
  
  • components

此目录主要存放顶层公告组件,例如 appbarscaffolddialog等等,例如:

├── components.dart
├── custom_appbar.dart
└── custom_scaffold.dart
  • pages

此目录主要存放页面文件,例如:

注:每个Item为一个文件夹.

├── Index
├── home
├── login
├── notfound
├── proxy
└── splash

  • router

此目录为路由文件,此模版的路由方式约定为命名路由,为固定目录,目录结构如下:

├── app_pages.dart
└── app_routes.dart

  • services

此目录用来存放API,例如:

├── services.dart
└── user.dart  // 关于用户的API
  • utils

此目录用来存放一些工具模块,例如 requestlocal_storage等等,例如:

├── authentication.dart
├── local_storage.dart
├── request.dart
├── screen_device.dart
└── utils.dart

开发规范

当你需要新建一个页面时,你需要按照以下步骤进行:

假设我们现在要创建一个Home 页面.

  1. pages 目录下新建home 目录:
// pages

$ mkdir home
$ cd home
  1. home 目录下,新建以下四个文件:
  • home_view.dart : 视图(用来实现页面布局)

  • home_contrller.dart : 控制器(用来实现业务逻辑)

  • home_binding : 控制器绑定(用来绑定controllerview)

  • home_model : 数据模型(用来约定数据模型)

注意:每创建一个页面时,都必须如此做,命名采用 '页面名_key' 这样的形式。

当你创建好一个页面,目录应该长这样 👇

// home
.
├── home.binding.dart
├── home_controller.dart
├── home_model.dart
└── home_view.dart
  1. router文件夹下面添加对应路由:
// app_routes.dart
part of 'app_pages.dart';
abstract class AppRoutes {
  ...
  static const Home = '/home';
  ...
}
// app_pages.dart
class AppPages {

  static final routes = [
    ...
    GetPage(
      name: AppRoutes.Home,
      page: () => HomePage(),
      binding: HomeBinding(),
    ),
    ...
  ];
}

完成以上步骤,你就可以愉快的开始开发了。

状态管理

contrller 是我们实现业务逻辑的地方,为什么我们要将 业务逻辑和视图分开呢?因为flutter 的意大利面式的代码实在是太难维护了,本来flutter 的页面布局和样式写在一起就很恶心了,再加上业务逻辑代码的话,实在太难以维护,而且,如果我们想要拥有状态的话,我们的页面不得不继承自stateful widget,性能损耗太严重了。

所以我们利用 getx 提供的 controller,将我们的业务逻辑和视图解耦。

一个标准的contrller长这样:

class HomeController extends GetxController {
  final count = 0.obs;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {}

  @override
  void onClose() {}

  void increment() => count.value++;
}

当我们需要一个响应式的变量时,我们只需在变量的后面加一个.obs,例如:

final name = ''.obs;
final isLogged = false.obs;
final count = 0.obs;
final balance = 0.0.obs;
final number = 0.obs;
final items = <String>[].obs;
final myMap = <String, int>{}.obs;

// 甚至自定义类 - 可以是任何类
final user = User().obs;

值得注意的是,因为现在flutter 有了null-safety,所以我们最好给响应式变量一个初始值。

当我们在controller更新了响应式变量时,视图会自动更新渲染。

但是实际上,你也可以不定义这种响应式变量,例如我们可以这样:

class HomeController extends GetxController {
  int count = 0;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {}

  @override
  void onClose() {}

  void increment() {
    count++;
    update();
  } 
}

这样和.obs的唯一区别是,我们需要手动调用 update() 更新状态的变化,这样view才能在count变化时,收到我们的通知重新渲染。

我们应该将发起请求,放在onInit钩子里面,例如进入订单页面时,我们应该获取订单信息,就如同在 stateful wdiget 里面的init钩子一样。

视图

首先,你需要将你的class 继承自 GetxView<T>(T 为你的Controller),例如:

class HomePage extends GetView<HomeController> {
  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(),
    );
  }
}

GetxView<HomeController> 会自动帮你把 Controller 注入到 view 中,你可以简单理解为它自动帮你执行了以下步骤

final controller = Get.find<HomeController>();

不必担心 GetxView<T> 的性能,因为它仅仅是继承自 Stateless Widget ,记住,有了 getx 你完全不需要 Stateful Widget

当我们想要绑定controller的变量时,我们约定了两种方法:

  1. Obx(()=>)

如果你的变量是.obs的,那么我们就使用Obx(()=>),它会在变量变更时自动刷新view,例如:

// home_contrller
class HomeController extends GetxController {
  final count = 0.obs;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {}

  @override
  void onClose() {}

  void increment() => count.value++;
}

view里面使用 Obx(()=>) 绑定count:

// home_view
class HomePage extends GetView<HomeController> {
  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Obx(() => Center(child: Text(controller.count.toString()))),
      ),
    );
  }
}
  1. GetBuilder<T>

如果你的变量不是.obs的,那么我们就使用GetBuilder<T>,例如:

class HomeController extends GetxController {
  int count = 0;

  @override
  void onInit() {
    super.onInit();
  }

  @override
  void onReady() {}

  @override
  void onClose() {}

  void increment() {
    count++;
    update();
  } 
}

view 里面使用 GetBuilder<T> 绑定count:

class HomePage extends GetView<HomeController> {
  HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return BaseScaffold(
      appBar: MyAppBar(
        centerTitle: true,
        title: MyTitle('首页'),
        leadingType: AppBarBackType.None,
      ),
      body: Container(
        child: GetBuilder<HomeController>(builder: (_) {
          return Center(child: Text(controller.count.toString()));
        }),
      ),
    );
  }
}

其实getx还提供了其他的render function,但是为了减少心智负担和复杂度,我们就使用这两种就够了。

路由管理

这里我们采用了getx提供的命名式路由,如果你学过vue,那么几乎没有学习成本。

假设我们现在添加了一个页面,叫做List,然后我们需要到router文件夹下面去配置它:

// app_routes.dart
part of 'app_pages.dart';
abstract class AppRoutes {
  ...
  static const List = '/list';
  ...
}
// app_pages.dart
class AppPages {

  static final routes = [
    ...
    GetPage(
      name: AppRoutes.Home,
      page: () => ListPage(),
      binding: ListBinding(),
    ),
    ...
  ];
}

这个List对应的假设是订单列表,当我们点击列表中某个订单时,我们通常会进入到订单详情页面,所以我们此时应再添加一个详情页面:

// app_routes.dart
part of 'app_pages.dart';
abstract class AppRoutes {
  ...
  static const List = '/list';
  static const Detaul = '/detail';
  ...
}
// app_pages.dart
class AppPages {

  static final routes = [
    ...
    GetPage(
      name: AppRoutes.Home,
      page: () => ListPage(),
      binding: ListBinding(),
      children: [
        GetPage(
          name: AppRoutes.Detail,
          page: () => DetailPage(),
          binding: DetailBinding(),
        ),
      ],
    ),
    ...
  ];
}

因为详情页面和列表页面有先后级关系,所以我们可以将 Detail 页面,放到 Listchildren 下面,当然你也可以不这样做。

当我们使用时:

Get.toNamed('/list/detail');

其他路由钩子:

浏览并删除前一个页面:

Get.offNamed("/NextScreen");

浏览并删除所有以前的页面:

Get.offAllNamed("/NextScreen");

传递参数:

Get.toNamed("/NextScreen", arguments: {id: 'xxx'});

参数的类型可以是一个字符串,一个Map,一个List,甚至一个类的实例。

获取参数:

print(Get.arguments);
// print out: `{id: 'xxx'}`

使用 getx 的路由它有一个非常好的优点,那就是它是去context化的。还记得我们以前被context 支配的恐惧吗? 有了getx,它将不复存在。

使用 monia-cli 进行开发

我们很高兴,能将 flutter-getx-template 加入到 monia-cli

利用 monia-cli 新建flutter项目:

monia create <project-name>
➜  Desktop monia create flutter_demo
? Which framework do you want to create Flutter
? Which flutter version do you want to create null-safety
? Please input your project description description
? Please input project version 1.0.0

✨  Creating project in /Users/xieyezi/Desktop/flutter_demo.

🗃  Initializing git repository....
.......
⠏ Download template from monia git repository... This might take a while....

🎉  Successfully created project flutter_demo.
👉  Get started with the following commands:

$ cd flutter_demo
$ flutter run

                        _                  _ _ 
  _ __ ___   ___  _ __ (_) __ _        ___| (_)
 | '_ ` _ \ / _ \| '_ \| |/ _` |_____ / __| | |
 | | | | | | (_) | | | | | (_| |_____| (__| | |
 |_| |_| |_|\___/|_| |_|_|\__,_|      \___|_|_|

不仅如此, monia-cli 还提供了快速生成一个 flutter getx 页面的功能。

假如现在你想生成一个 order_sending 新页面,你只需在 pages 目录下面输入:

monia init order_sending
➜  pages monia init order_sending
✨  Generate page in /Users/xieyezi/Desktop/flutter_demo/lib/pages/order_sending.
⠋ Generating, it's will not be wait long...
generate order_sending lib success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/order_sending/order_sending_view.dart file success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/order_sending/order_sending_controller.dart file success.
generate /Users/xieyezi/Desktop/flutter_demo/lib/pages/order_sending/order_sending_binding.dart file success.

🎉  Successfully generate page order_sending.

vscode 插件

monia 还提供了vscode 插件: monia-vscode-extension

点击左下角的monia-generate 文字按钮,输入pageName,即可在pages目录下新建一个flutter getx page

example.gif

官方链接

状态管理 路由管理 依赖管理

GitHub

https://github.com/xieyezi/flutter-getx-template
You might also like...

A basic template of Flutter to get started. Includes various folders and packages that might be necessary.

A basic template of Flutter to get started. Includes various folders and packages that might be necessary.

Flutter App - Basic Template It's a time saving template with basic project structure, packages and other files like constants.dart to get started rat

Jun 12, 2022

A Meditation App UI template made using flutter and dart

A Meditation App UI template made using flutter and dart

Flutter Meditation App A Meditation App UI template made using flutter and dart. Please star the repo to support the project Screenshots Created & Mai

Jun 1, 2022

Scaff is a simple command-line utility for generating Dart and Flutter components from template files.

Introduction Scaffold Generator for Dart and Flutter. scaff is a simple command-line utility for generating Dart and Flutter components from template

May 5, 2022

Flutter project template with BloC and repository pattern.

Flutter project template with BloC and repository pattern.

Jun 10, 2022

Portfolio template for lazy people like you and me 🚀

Looking for collaborators and maintainers. Feel free to connect! Developer Portfolio ⚡️ It's minimal, beautiful and responsive! Don't have or don't kn

Jun 27, 2022

Dart Web API Template Using Google Shelf Framework and Postgres Drivers, read readme to learn how to use

Shelf Web Framework Template by Alex Merced of AlexMercedCoder.com Cloning the Template git clone https://github.com/AlexMercedCoder/DartShelfPostgres

May 11, 2022

Use the template to create your own repository, complete the project and verify

Use the template to create your own repository, complete the project and verify

Proyecto Nivelación MisionTic Usar el template para crear un repositorio propio,

Dec 20, 2021

Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster.

Readky. Introduction Readky is a Free Flutter News App Starter Template that can help you develop a News application much faster. You just need to add

Jun 22, 2022

Starting template for a new Flutter project. Using clean architecture + Riverpod.

flutter_project_template_riverpod Installation Add Flutter to your machine Open this project folder with Terminal/CMD Ensure there's no cache/build le

Jun 4, 2022
Comments
  • 1. The plugin `image_gallery_saver` uses a deprecated version of the Android embedding.

    This pub breaks the building with log:

    The plugin `image_gallery_saver` uses a deprecated version of the Android embedding.
    To avoid unexpected runtime failures, or future build failures, try to see if this plugin supports the Android V2
    embedding. Otherwise, consider removing it since a future release of Flutter will remove these deprecated APIs.
    If you are plugin author, take a look at the docs for migrating the plugin to the V2 embedding:
    https://flutter.dev/go/android-plugin-migration.
    
    

    Any update or alternative?

    Thanks for reply~

    This issue is related to flutter version v2.5
    
    Reviewed by byoungd at 2021-09-10 02:02
  • 2. 项目不错: 有几个建议

    • 这个模板目录结构还可以.
    • 不过不确定你有没有看过官方的 get_cli 生成的模板目录.
      • get_cli 除了可以初始化目录, 还可以命令行添加 page/view/controller.
      • 我看你基于一个 js 的工具, 做脚手架.
    • 我早先也尝试自己定义一个目录, 不过试用官方的get_cli生成的目录. 还是决定用官方的目录了.

    get_cli 支持的指令:

    • 我不确定你有使用过这些指令麽.
    • 这些指令已经足够好用. 我是建议你可以把这个 repo 里, 新增的特性, 提交给官方的脚手架.
    
      get-create-project:
        cmds:
          - get create project:my_app
    
      # 初始化 app 目录:
      get-init:
        cmds:
          - get init
          - task: mkdir
            vars: {FOLDER: "lib/app/data/locales"}
    
      # 代码格式化:
      get-sort:
        cmds:
          - get sort
    
      get-gen-locales:
        desc: "generate multi language(i18n)"
        cmds:
          - get generate locales assets/locales on data/locales
    
      get-add-page:
        cmds:
          - get create page:$PAGE_NAME # set from .env(check .env.local)
    
      get-add-sub-page:
        cmds:
          - get create page:$PAGE_NAME on $PAGE_PATH
    
      get-add-controller:
        cmds:
          - get create controller:$VIEW_NAME on $VIEW_PATH
    
      get-add-view-only:
        cmds:
          - get create view:$VIEW_NAME on $VIEW_PATH
    
      get-add-view:
        cmds:
          - task: get-add-view-only
          - task: get-add-controller
    
      get-provider:
        cmds:
          - get create provider:$PROVIDER_NAME on data
    
      get-gen-model:
        cmds:
          #- get generate model with assets/models/wallet_address_asset_entity.json --skipProvider
          - get generate model with $MODEL_JSON_FILE_PATH --skipProvider
    
    

    几个优化点:

    • 多语言: 官方的 get_cli 支持生成: 不需要手动管理
    get generate locales assets/locales on data/locales
    
    
    • 基于官方脚手架添加页面, 会自动更新 router.
    • main 文件: Global.init().then() 是个好写法. 不过. 其实 Global 不需要这样定义.
      • Get.put(), Get.lazyPut() 可以 put 任何东西, 包括全局变量集.
      • 你可以后续使用 Get.find() 方式, 在项目任意位置访问到. 其实间接实现全局变量的效果.
      • 这样会更方便.
    Get.lazyPut<HomeController>(() => HomeController());
    

    anyway:

    • 不是来吵架的哈. 我是看到有同样喜欢 GetX 的开发者. 过来看一下. 😄
    • 另外, 我创建了一个技术讨论组 gossipcoder. 欢迎加入一起来讨论技术, flutter 或者其他.
    • https://github.com/hhstore/blog/issues/309

    discord 讨论组:

    • https://discord.gg/MnDA9pfWAW
    • 删掉了 keybase 的讨论组, 迁移到 discord.
    • 之前选择 keybase, 是觉得没被墙. 还是不够稳定
    Reviewed by hhstore at 2021-08-11 02:32

Related

May 22, 2022
flutter 2.x and getx v4.x template

flutter_getx_template Language: 中文简体 | English 基于getx 实现的全新flutter getx 模版,适用于中大型项目的开发。 ?? flutter最新版本的空安全 ?? view 和 逻辑 完全解耦 ⚡ view 和 state 自动响应 ?? di

Jun 21, 2022
Flutter Getx Template

This is source flutter template use getx for statemanagement ☕

May 10, 2022
Flutter-GetX-Toturials - Getx full tutorials for flutter
Flutter-GetX-Toturials - Getx full tutorials for flutter

getx_full_tutorials A new Flutter getx tutorial. This Project Contains: Snackbar

Mar 24, 2022
constructing... Flutter, Ganache, Truffle, Remix, Getx Pattern, Infura, GetX, Blockchain

constructing... Flutter, Ganache, Truffle, Remix, Getx Pattern, Infura, GetX, Blockchain

May 16, 2022
WooCommerce App template that uses Flutter. Integrated to work with WooCommerce stores, connect and create an IOS and Android app from Flutter for IOS and Android
WooCommerce App template that uses Flutter. Integrated to work with WooCommerce stores, connect and create an IOS and Android app from Flutter for IOS and Android

WooCommerce App: Label StoreMax Label StoreMax - v5.3.1 Official WooSignal WooCommerce App About Label StoreMax Label StoreMax is an App Template for

Jun 21, 2022
Structured and Organized Flutter (ANDROID+WEB) template project using Redux architecture and Retrofit rest package

flutter_redux_template A new Flutter project. JSON Models classes need this lines to json generator: part 'foo.g.dart'; //on imports factory Foo.from

Apr 11, 2022
It's a universal app template to have a great animated splash screen and liquid slider. Just change the animation if you want (rive) and change the images or colours according to your app.

liquid A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this i

Oct 28, 2021
Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications
Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications

Now UI Flutter is a fully coded app template built for Flutter which will allow you to create powerful and beautiful e-commerce mobile applications. We have redesigned all the usual components to make it look like our Now UI Design, minimalistic and easy to use.

Apr 27, 2022
A basic template of Flutter to get started. Includes various folders and packages that might be necessary.
A basic template of Flutter to get started. Includes various folders and packages that might be necessary.

Flutter App - Basic Template It's a time saving template with basic project structure, packages and other files like constants.dart to get started rat

Jun 12, 2022