npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

getx-template

v1.2.13

Published

It supports the getx library and provides effective creation of business modules for Flutter applications.

Downloads

15

Readme

GetX 项目代码生成工具

© 猫哥

订阅号


这个插件是和 flutter_ducafecat_news_getx 配套使用的

  • github 仓库地址

https://github.com/ducafecat/flutter_ducafecat_news_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 完整的代码

使用说明

目录上右键菜单操作

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"]); 采用这种方式出发 GetBuilderid属性,进行控制刷新


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(),
          ),
        );
      },
    );
  }
}

可以看到 GetXStatefulWidget 的优雅的结合方式,就是作为组件在 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';

end

大家可以自己动手体验下~


© 猫哥

订阅号