# flutter_stu **Repository Path**: laich/flutter_stu ## Basic Information - **Project Name**: flutter_stu - **Description**: 自学使用 flutter + UI 等操作 flutter 3.10+ - **Primary Language**: Dart - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 1 - **Created**: 2023-09-15 - **Last Updated**: 2023-10-16 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # my_flu01 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 is your first Flutter project: - [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) - [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. * 不指定终端 flutter run --web-renderer html --release * 指定终端运行 flutter run -d edge --web-renderer html --release # flutter 的布局 Flutter提供了两种设计风格: Material 风格、Cupertino风格. Material是一种移动端和网页端通用的视觉设计语言，Flutter 提供了丰富的 Material 风格的 widgets。 A convenience widget that combines common painting, positioning, and sizing widgets. 即，Container 是一个结合了绘制（painting）、定位（positioning）以及尺寸（sizing）widget的widget。 它是一个组合的widget，内部有绘制widget、定位widget、尺寸widget。后续看到的不少widget，都是通过一些更基础的widget组合而成的。 * [中文 documentation](https://book.flutterchina.club/chapter4/intro.html) # fultter 指令记录 ``` $ flutter doctor //进行flutter环境诊断，比如有没有缺少安装的东西等。当flutter不能启动时，试试这个 $ flutter upgrade //更新Flutter SDK 以及依赖包，在应用程序根目录（包含pubspec.yaml文件的目录）中运行 如果不想升级SDK只想更新依赖包，则使用： flutter packages get ：获取pubspec.yaml文件中列出的所有依赖包 flutter packages upgrade ：获取pubspec.yaml文件中列出的所有依赖包的最新版本 $ flutter channel //查看当前sdk的github分支 ///可以通过指定channel名切换分支 $ flutter channel beta flutter devices //当前可运行app的设备列表 $ flutter clean //删除build生成的文件，dart_tool目录被删除 $ flutter pub get //pubspec.yaml更新后，执行此命令获取最新的lib $ flutter pub deps //显示lib的依赖关系树 flutter config --enable-windows-desktop flutter create . //这会将新的桌面平台目录添加到您现有的项目中，以便您可以为其构建。 flutter run -d windows //flutter run -d macos // 也可以這樣 flutter create --platforms=windows,macos,linux . # 启动Flutter-android $ flutter config --enable-android # 启动Flutter-Web $ flutter config --enable-web # 启动Flutter-Dexktop-Linux $ flutter config --enable-linux-desktop # 启动Flutter-Desktop-macOS $ flutter config --enable-macos-desktop flutter build xxx //打包 指定目标(xxx)后进行build，build产物生成在./build/xxx目录下 APP运行 $ flutter run 面向flutter devices中的设备，进行pub get 、build、install等一连串操作 $ flutter run --release 以release版本运行 $ flutter run --debug 以debug版本运行 $ flutter run -d xxx 指定目标devices ， -d 用来指定设备ID $ flutter run -d macOS 1 $ flutter run --verbose run运行过程中的详细log 安装 $ flutter install 将build后的产物安装到设备 测试 $ flutter test 执行根目录下test文件夹中的单元测试 其他 $ flutter screenshot 对当前链接的设备进行截屏。可以通过 --out 参数指定截屏输出路径 $ flutter --help 命令帮助 ``` # flutter 常用操作 json、Map、List相互转换 map 转对象，对象转map、json ```dart // flutter 常用操作 json、Map、List相互转换 // 1.json 转 List //一个JSON格式的字符串 String jsonStr = '[{"name":"张三"},{"name":"李四"}]'; //将JSON字符串转为 ListList list = json.decode(jsonStr); //输出第一个用户的姓名 print(list[0]["name"]); // 2.List转Json String jsonStringA = json.encode(list); print(jsonStringA); // 3.Json转Map //一个JSON格式的字符串 String jsonStr = '{"name": "王五","address": "北京市东城区"}'; //将JSON字符串转为 ListMap map = json.decode(jsonStr); //输出 print('姓名： map[′name′]′);print(′地址：���[′����′]′);�����(′地址：{map['address']}'); // 4.Map转Json String jsonStringB = json.encode(map); print(jsonStringB); // 5.List 转 List List menuList = List.from( menuListData.map((item) => ListViewModel.fromJson(item)).toList()); //map 转对象 ,也可以认为 JSON转对象。json这里=map User.formJson(Map? model){ this.id = model['id'] } ``` # 项目部分截图预览 drawing drawing drawing drawing
drawing drawing drawing drawing ## dio api 请求记录 ``` api 使用 import 'package:dio/dio.dart'; static final api = ApiRequest(); Future post(String path, [Map? data]) async { try { final response = await Dio(options).post( url(path), data: data, ); return Result.response(response); } on DioError catch (_) { if (_.response != null) { return Result.response(_.response!); } logger.warning('Request Error', _); return Result(500, _.message ?? 'Net error'); } } // get 方式 var response = await Dio(options).get>( url(path), queryParameters: params, ); ``` # pubspec.yaml文件详细介绍 ``` name: hello_flutter # 应用名称 description: A new Flutter project. # 应用描述 # 指定生成发布包的位置 # 非必填 # 若不填写，则默认使用pub.dev站点进行发布，但若希望阻止发布，则需要声明为none。 # 同时此设置可以将flutter项目发布到自定义的服务器之中。 publish_to: 'none' version: 1.0.0+11 # 应用版本信息，版本为1.0.0，版本编码versionCode为11 # 项目描述，非必填 # 若需要将项目托管在pub.dev则该字段必填。 description: >- Have you been turned into a newt? Would you like to be? This package can help. It has all of the newt-transmogrification functionality you have been looking for. # 项目主页，非必填 # 该项目的介绍主页，填写域名 homepage: https://example-pet-store.com/newtify # 开发文档位置，非必填 # 与`homepage`不同，若该项目还包含其他文档，可以将文档的地址添加到该节点下。如果项目托管在pub.dev，该节点显示项目的API信息。 documentation: https://example-pet-store.com/newtify/docs # 问题追踪页面，非必填 # 若该项目是一个开源且随时更新的项目，可以通过填写该属性，标明该项目的问题追踪文档站点，如果使用pub.dev来进行项目托管，则pub.dev将尝试通过该字段显示该项目的问题跟踪链接。若该项目托管在github，则可以将该字段填写为github的issues issue_tracker: https://github.com///issues # Dart的运行环境（支持>=2.7到<3.0区间） environment: sdk: ">=2.7.0 <3.0.0" # 项目的第三方插件依赖，在这个标签中列出了该项目正常工作所需的每一个软件包与版本。以下通过实例详解该标签的详情 dependencies: # 实例1 直接写明约束版本，若该插件是发布在https://pub.dev/ 之上，IDE会直接在项目目录下执行`flutter packages get`来下载其插件的最新版本 transmogrify: # 实例2 该插件是在实例1的基础上进行延伸，其中`^1.4.0`的含义是约束了版本号，也就是在该项目中，需要使用1.4.0版本 transmogrify: ^1.4.0 #实例3 若该插件未部署在pub.dev之上，则可以通过URL来指定出插件下载的源 transmogrify: hosted: name: transmogrify url: http://some-package-server.com #实例4 基于实例3，其中version表明了使用该插件的版本信息 transmogrify: hosted: name: transmogrify url: http://some-package-server.com version: ^1.4.0 #实例5 若该插件是发布在git上，可以用以下方式来进行插件获取，默认获取master下代码 transmogrify: git: url: git://github.com/munificent/kittens.git #实例6 基于实例5，其中ref标明获取的分支信息 transmogrify: git: url: git://github.com/munificent/kittens.git ref: some-branch #实例7 基于实例5，若插件只是在项目中的某一个目录中，可以通过path来指定插件位置 transmogrify: git: url: git://github.com/munificent/kittens.git path: path/to/kittens #实例8 若插件在本地某一目录，可以通过指定path来找到该插件 transmogrify: path: /Users/me/transmogrify #指定版本，若该项目使用的插件需要约束版本，则方法如下 #实例1 在该项目中，此插件指定版本为1.4.0 transmogrify: ^1.4.0 #实例2 在该项目中，此插件最低版本为1.2.3 transmogrify: ">=1.2.3" #实例3 在该项目中，此插件最低支持2.0.0版本，但不支持3.0.0以上版本 transmogrify: ">=2.0.0 <3.0.0" #实例4 在该项目中，此插件最高支持到1.2.3以下版本 transmogrify: "<1.2.3" #指定Flutter SDK #实例1 项目必填项，指定SDK，并获取SDK最新版 flutter: sdk: flutter #实例2 基于实例1，指定SDK版本号 flutter: sdk: flutter version: ">=2.0.0-dev.68.0 <3.0.0" #实例3 另外一种写法 flutter_driver: sdk: flutter version: ^0.0.1 # 区别于dependencies标签，dependencies是生产环境依赖库版本，dev_dependencies是开发环境依赖库版本，该环境仅在开发调试时使用。标签规则同dependencies dev_dependencies: flutter_test: sdk: flutter # 重写依赖包，会强制下载对应依赖包，并可以对该依赖包进行重写。 dependency_overrides: transmogrify: ^1.4.0 # 可以将Dart2的可执行脚本引入到flutter之中，作为插件使用，但前提是这些脚本均可以在命令行正常调用。 executables: : # 项目中配置声明方式 # 用于在项目中添加资源、设置字体、配置插件参数等。 flutter: uses-material-design: true # 实例1 添加资源 assets: - images/park.jpg - images/lake.jpg - images/touxiang.jpg #设置字体，样式，可以通过声明family来设置字体分组 fonts: - family: Schyler fonts: - asset: fonts/Schyler-Regular.ttf - asset: fonts/Schyler-Italic.ttf style: italic - family: Trajan Pro fonts: - asset: fonts/TrajanPro.ttf - asset: fonts/TrajanPro_Bold.ttf weight: 700 ```