2023年Flutter教程_Flutter+Getx仿小米商城项目实战视频教程-V3版

Flutter是谷歌公司开发的一款开源、免费的UI框架,可以让我们快速的在Android和iOS上构建高质量App。它最大的特点就是跨平台、以及高性能。 目前 Flutter 已经支持 iOS、Android、Web、Windows、macOS、Linux 的跨平台开发

 

17 Flutter介绍-Flutter Windows Android环境搭建 真机调试

GetX 是 Flutter 上的一个轻量且强大的解决方案,我们可以把它当做一个轻量级的Flutter框架来使用。Getx不仅具有状态管理的功能,还具有路由管理、主题管理、国际化多语言管理、Obx局部更新、MVC视图业务分离、网络请求、数据验证等功能。GetX 官方还提供了get_cli脚手架工具,可以让我们快速生成Page、View、Controller、Provider、Model以及基于Getx的flutter项目。

 

此套Flutter教程包括Dart入门基础教程16讲、Null safety 、late 关键字、空类型声明符?、非空断言!、required Flutter入门基础、Flutter瀑布流布局Flutter动画Flutter异步流GlobalKey 、Flutter国际化、Flutter NativeGetxGet_CliFlutter+Getx仿小米商城项目(真实Api接口、真实交互、真实企业级项目实战)、仿小米商城透明导航 、浮动导航、导航动画、六格验证码、Photo-view类似朋友圈图片预览、StreamBuilder  AnimatedBuilder打字游戏、SingleChildScrollView锚点效果、url_launcher打开内部软件,url_launcher调用高德导航Flutter签名验证、Flutter打包android应用、Flutter打包ios应用、上传AppstoreFlutter常见插件使用、Flutter Dio、以及Flutter拍照上传 、Flutter自动升级应用Flutter扫码二维码Flutter状态管理、Flutter 事件驱动、Flutter本地存储Flutter播放视频、Flutter WebViewFlutter解析html、Flutter打开外部应用、Flutter拨打电话、调用导航Flutter 高德地图、Flutter微信支付Flutter支付宝支付Flutter微信分享...

 

Flutter教程拓展新增Flutter Android极光推送Flutter Ios极光推送、Flutter指定设备推送、Flutter Socket.io即时通讯 、直播流程(推流、拉流)、借助腾讯云直播、自己搭建直播服务器、Flutter中实现直播、flutter生物识别认证 、Flutter指纹认证人脸认证、Flutter百度Ai 实现拍照识别文字获取运营商手机号 一键登录、一键登录rsa加密 解密、Flutter 物联网 、Flutter Android Blue 、Flutter Ios Blue Flutter中通过蓝牙操作智能硬件Flutter中通过Mqtt协议操作远程的智能硬件Wifi模块等。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,让我们来实战一下 Flutter GetX。 1. 首先,我们需要在 `pubspec.yaml` 文件中添加 GetX 的依赖。 ```yaml dependencies: flutter: sdk: flutter get: ^4.6.1 ``` 2. 然后,我们需要在 `main.dart` 文件中引入 GetX 包,并在 `runApp` 函数中添加 `GetMaterialApp`。 ```dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter GetX Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomePage(), ); } } ``` 3. 接下来,我们需要创建一个 `HomePage` 类,这个类将会是我们的主页。在 `HomePage` 类中,我们将会使用 `GetX` 的 `Obx` 和 `GetBuilder` 来管理状态和更新 UI。 ```dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; class HomePage extends StatelessWidget { const HomePage({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Flutter GetX Demo'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ GetBuilder<CounterController>( builder: (controller) => Text( 'Count: ${controller.count}', style: const TextStyle(fontSize: 24), ), ), const SizedBox(height: 16), ElevatedButton( onPressed: () { final controller = Get.find<CounterController>(); controller.increment(); }, child: const Text('Increment'), ), ], ), ), ); } } class CounterController extends GetxController { var count = 0.obs; void increment() { count++; } } ``` 在这个例子中,我们使用了 `GetBuilder` 来订阅 `CounterController` 中的 `count` 变量。当 `count` 发生变化时,UI 将会自动更新。我们还使用了 `Get.find` 来获取 `CounterController` 的实例,然后调用 `increment` 方法来增加计数器的值。 4. 最后,我们需要在 `main.dart` 文件中注册 `CounterController`。 ```dart import 'package:flutter/material.dart'; import 'package:get/get.dart'; void main() { Get.put(CounterController()); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return GetMaterialApp( title: 'Flutter GetX Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const HomePage(), ); } } class HomePage extends StatelessWidget { // ... } class CounterController extends GetxController { // ... } ``` 在这个例子中,我们使用了 `Get.put` 来注册 `CounterController`,这样我们就可以在整个应用程序中使用它了。 以上就是一个简单的 Flutter GetX 实战例子,希望能够帮助到你入门 GetX。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值