Skip to content
| Marketplace
Sign in
Visual Studio Code>Programming Languages>Flutter GetX Helper - wangmuranNew to Visual Studio Code? Get it now.
Flutter GetX Helper - wangmuran

Flutter GetX Helper - wangmuran

wangmuran

|
56 installs
| (0) | Free
It supports the getx library and provides effective creation of business modules for Flutter applications.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Copied to clipboard
More Info

GetX 项目代码生成工具

功能

  1. 根据 x3 图片自动生成 x1 x2 图片
  2. 生成 图片 svg 常量列表 files.txt
  3. 生成规范目录 common
  4. 生成 GetBuilder + GetView 的代码
  5. 生成 StatefulWidget + GetBuilder + GetView 的代码
  6. 生成 controller、view、widgets、bindings、state、index 完整的代码
  7. 生成 路由声明定义文件

    common/routers/names.txt common/routers/pages.txt pages/index.txt


使用说明

目录上右键菜单操作

1. 根据 x3 图片自动生成 x1 x2 图片

请将你的 图片、Svg 放到目录

assets/images/
assets/svgs/
  • 准备好你的 assets/images/3.0x 图片
  • 右键点击菜单 Assets: Images x1 x2 Generate
  • 成功生成了 2.0x 文件夹,和 1x 的图片

2. 生成 图片 svg 常量列表 files.txt

点击 Assets: Images x1 x2 Generate 同时会生成常量列表文件 files.txt

文件位置

assets/images/files.txt
assets/svgs/files.txt

所以你的 图片 svg 要放到指定位置

  • 生成 files.txt 常量列表
  • 如果你把 svg 放到 assets/svgs 这个目录下,也会生成常量列表

3. 生成规范 common 目录

自动创建开发目录

- common
  - api
    - index.dart
  - i18n
  - models
  - routers
  - services
  - style
  - utils
  - widgets
- pages
  - index.dart

4. 生成 GetBuilder + GetView 的代码

只有 controller、view 两个文件

推荐用这种,简单快速,自带自动释放控制器,GetBuilder 方式对性能也好。

  • view
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';

class AbcPage extends GetView<AbcController> {
  const AbcPage({Key? key}) : super(key: key);

  Widget _buildView() {
    return Container();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<AbcController>(
      init: AbcController(),
      id: "abc",
      builder: (_) {
        return Scaffold(
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}

采用 GetBuilder 手动、布局控制刷新,性能好,推荐这种。 注意看这个 id 属性,需要全局唯一

代码清单:

  • controller
import 'package:get/get.dart';

class AbcController extends GetxController {
  AbcController();

  _initData() {
    update(["abc"]);
  }

  void onTap() {}

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

  @override
  void onReady() {
    super.onReady();
    _initData();
  }

  // @override
  // void onClose() {
  //   super.onClose();
  // }

  // @override
  // void dispose() {
  //   super.dispose();
  // }
}

常用的生命周期函数也生成了,按需要放开注释 update(["abc"]); 采用这种方式出发 GetBuilder 的 id属性,进行控制刷新


5. 生成 StatefulWidget + GetBuilder + GetView 的代码

这种是在 GetBuilder + GetView 的基础上,再加入了 StatefulWidget 包裹,比如你需要 mixin 一些功能的时候需要(AutomaticKeepAliveClientMixin、wantKeepAlive)。

代码清单:

  • controller
import 'package:get/get.dart';

class MyController extends GetxController {
  MyController();

  _initData() {
    update(["my"]);
  }

  void onTap() {}

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

  @override
  void onReady() {
    super.onReady();
    _initData();
  }

  // @override
  // void onClose() {
  //   super.onClose();
  // }

  // @override
  // void dispose() {
  //   super.dispose();
  // }
}
  • view
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';

class MyPage extends StatefulWidget {
  const MyPage({Key? key}) : super(key: key);

  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage>
    with AutomaticKeepAliveClientMixin {
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return const _MyViewGetX();
  }
}

class _MyViewGetX extends GetView<MyController> {
  const _MyViewGetX({Key? key}) : super(key: key);

  Widget _buildView() {
    return Container();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<MyController>(
      init: MyController(),
      id: "my",
      builder: (_) {
        return Scaffold(
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}

可以看到 GetX 和 StatefulWidget 的优雅的结合方式,就是作为组件在 StatefulWidget.build 时创建 并不是用了 GetX 就不要 StatefulWidget 了,很多 Mixin 还是需要的


6. 生成 完整的代码

鼠标右键你的视图目录,输入名称生成代码

这种方式,包含了全部的 controller、view、widgets、bindings、state 拆分的很细致

代码清单:

  • controller
import 'package:get/get.dart';

import 'index.dart';

class AccountController extends GetxController {
  AccountController();

  final state = AccountState();

  // tap
  void handleTap(int index) {
    Get.snackbar(
      "标题",
      "消息",
    );
  }

  /// 在 widget 内存中分配后立即调用。
  @override
  void onInit() {
    super.onInit();
  }

  /// 在 onInit() 之后调用 1 帧。这是进入的理想场所
  @override
  void onReady() {
    super.onReady();
  }

  /// 在 [onDelete] 方法之前调用。
  @override
  void onClose() {
    super.onClose();
  }

  /// dispose 释放内存
  @override
  void dispose() {
    super.dispose();
  }
}

  • view
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import 'index.dart';
import 'widgets/widgets.dart';

class AccountPage extends GetView<AccountController> {
  const AccountPage({Key? key}) : super(key: key);

  // 内容页
  Widget _buildView() {
    return const HelloWidget();
  }

  @override
  Widget build(BuildContext context) {
    return GetBuilder<AccountController>(
      builder: (_) {
        return Scaffold(
          body: SafeArea(
            child: _buildView(),
          ),
        );
      },
    );
  }
}

  • bindings
import 'package:get/get.dart';

import 'controller.dart';

class AccountBinding implements Bindings {
  @override
  void dependencies() {
    Get.lazyPut<AccountController>(() => AccountController());
  }
}

  • state
import 'package:get/get.dart';

class AccountState {
  // title
  final _title = "".obs;
  set title(value) => _title.value = value;
  get title => _title.value;
}

  • index
library account;

export './state.dart';
export './controller.dart';
export './bindings.dart';
export './view.dart';

  • widgets/hello.dart
import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../index.dart';

/// hello
class HelloWidget extends GetView<AccountController> {
  const HelloWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Obx(() => Text(controller.state.title)),
    );
  }
}
  • widgets/widgets.dart
library widgets;

export './hello.dart';

7. 生成 路由声明定义文件

common/routers/names.txt common/routers/pages.txt pages/index.txt

lib/common/routes/names.txt

static const application = '/application';
static const category = '/category';
static const frameNotfound = '/frame_notfound';
static const frameSignIn = '/frame_sign_in';
static const frameSignUp = '/frame_sign_up';
static const frameWelcome = '/frame_welcome';
static const main = '/main';

lib/common/routes/pages.txt


      GetPage(
        name: RouteNames.application,
        page: () => const ApplicationPage(),
      ),
      GetPage(
        name: RouteNames.category,
        page: () => const CategoryPage(),
      ),
      GetPage(
        name: RouteNames.frameNotfound,
        page: () => const FrameNotfoundPage(),
      ),
      GetPage(
        name: RouteNames.frameSignIn,
        page: () => const FrameSignInPage(),
      ),
      GetPage(
        name: RouteNames.frameSignUp,
        page: () => const FrameSignUpPage(),
      ),
      GetPage(
        name: RouteNames.frameWelcome,
        page: () => const FrameWelcomePage(),
      ),
      GetPage(
        name: RouteNames.main,
        page: () => const MainPage(),
      ),

lib/pages/index.txt

export 'application/index.dart';
export 'category/index.dart';
export 'frame/notfound/index.dart';
export 'frame/sign_in/index.dart';
export 'frame/sign_up/index.dart';
export 'frame/welcome/index.dart';
export 'main/index.dart';
  • Contact us
  • Jobs
  • Privacy
  • Manage cookies
  • Terms of use
  • Trademarks
© 2025 Microsoft