Flutter开发之基础知识

Flutter根底学问 创立Flutter项目 在Flutter开发中，创立一个Flutter 项目通常有以下两种方式：

运用flutter create命令，确保Flutter SDK配置了环境变量。 运用装置了Flutter和Dart插件的IDE，如Android Studio和IntelliJ IDEA。 命令行方式创立Flutter的命令如下：

flutter create 假如运用IDE创立Flutter项目，能够依次选择【File】->【New】->【New Flutter Project...】，如下图所示： 在这里插入图片描绘

运转项目 在Flutter开发中，运转Flutter项目主要有两种方式，一种是命令方式，一种是IDE的方式。 命令方式运转Flutter如下所示：

flutter run -d 'iPhone X' flutter run -d emulator-5554 其中，-d后面跟的是详细的设备称号，能够是Android或iOS模仿器的名字，也能够一台曾经衔接到电脑上的Android或iOS的设备。 相比命令方式，我们更引荐运用IDE图形化工具的方式，首先选择要运转的设备，然后选择main.dart入口文件，然后点击【运转】按钮即可运转Flutter项目，如下图： 在这里插入图片描绘 除了上面的命令外，Flutter开发中常见的命令还有：

flutter emulator //查看本地模仿器 flutter emulators --create --name xyz //创立一个模仿器 flutter emulators --launch //启动模仿器 flutter build apk; //打包Android应用 flutter build apk –release; flutter install; //装置应用 flutter build ios; //打包IOS应用 flutter build ios –release; flutter clean; //清算重新编译项目 flutter upgrade; //晋级Flutter SDK和依赖包 flutter channel; //查看Flutter官方分支列表和当前项目运用的Flutter分支 flutter channel <分支名>; //切换分支 除此之外，我们还能够点击 热重载按钮 (带有闪电⚡️图标的按钮)来开启热重载办法，如下图： 在这里插入图片描绘

Flutter调试 Flutter提供了各种各样的工具和功用来协助开发者调试Flutter应用程序，假如你运用的是VsCode作为开发工具，那么能够参考下面的调试技巧：

断点调试 在 Flutter 停止断点调试十分简单，只需求在 Vscode 上打上一个断点，按 F5 就会停在断点处。经过左边的调试栏，察看断点处的变量以及栈堆状况。 在这里插入图片描绘

debugger调试 debugger代码调试只能运转在开发阶段，debugger调试是Flutter提供的debugger API ，和JavaScript的console相似。例如：

import 'dart:developer'; void someFunction(double offset) { debugger(when: offset > 30.0, message: 'offset 大于 30 时，中缀'); // ... } 那么，当 offset 这个变量的值大于 30.0 时中缀运转，并输出 message 的内容。

rendering 调试 rendering 调试即开启规划线调试，当翻开 rendering 时会在界面上看到一些规划线，以便于修复规划效果。要开启rendering调试，需求在代码中添加debugPaintSizeEnabled。例如：

import 'package:flutter/rendering.dart'; void main() { debugPaintSizeEnabled = !true; runApp(new MyApp()); } 然后，重新运转项目即可看得效果。

日志调试 日志调试是软件开发中的一种很常见的调试方式，能够便当开发者查看程序运转的日志信息，如今盛行的IDE简直都集成了日志模块。 Android Studio和Vscode 里的控制台/调试控制台都能够看到。

当然，为了便当，我们也能够本人定义一个Debug类用于代码调试，例如：

class Debug { static log(String tag, String text) { print('[$tag] $text'); } static info(String tag, String text) { print('[$tag] $text'); } static success(String tag, String text) { print('[$tag] $text'); } static error(String tag, String text) { print('[$tag] $text'); } } 真机调试 在Android 真机上运转Flutter程序，需求先开启开发者选项，开启的步骤如下：

翻开【开发者选项】和【 USB 调试】。 运用 USB 将手机衔接电脑，若手机呈现提示，受权电脑访问手机。 在命令执行 flutter devices 确认衔接电脑的设备。 然后运用 flutter run 命令运转 app。 在手机上开启 USB 调试形式。 在这里插入图片描绘

Hello Word 和很多的程序一样，Flutter程序也有一个启动页面，新建项目时系统默许的启动页面是main.dart，那么我们能够修正main.dart的代码。例如：

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: 'Welcome to Flutter', theme: new ThemeData( primaryColor: Colors.white, ), home: new Scaffold( appBar: new AppBar( title: new Text('Welcome to Flutter'), ), body: new Center( child: new Text('Hello World'), ), ), ); } } 然后，运转上面的代码，能够看到如下的效果： 在这里插入图片描绘

Flutter 项目构造 翻开新建懂得Flutter工程，项目构造如下图所示： 在这里插入图片描绘 能够发现，一个完好的Flutter项目目录构造如下：

┬ └ projectname ┬ ├ android - Android局部的工程文件 ├ build - 项目的构建输出目录 ├ ios - iOS局部的工程文件 ├ lib - 项目中的Dart源文件 ┬ └ src - 包含其他源文件 └ main.dart - 自动生成的项目入口文件，相似RN的index.js文件 ├ test - 测试相关文件 └ pubspec.yaml - 项目依赖配置文件相似于RN的 package.json 其中，关于开发者来说，比拟重要的有以下几个文件：

android：android平台相关代码； ios：ios平台相关代码； lib：flutter相关代码，也是Flutter项目源码寄存的中央； test：寄存测试代码； pubspec.yaml：配置文件，普通寄存一些第三方的依赖。 入口函数 我们晓得，每个应用程序都有一个入口函数，Flutter项目的入口函数就是main.dart文件的main函数。

void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( ... ); } } 在上面的代码中，返回了一个MaterialApp widget，MaterialApp能够了解为是UI的作风，MaterialApp是Android运用的作风，iOS则能够运用CupertinoApp作风。

Flutter主题 除了MaterialApp款式外，我们还能够运用全局主题或运用Theme来定义应用程序部分的颜色和字体款式。

全局主题 创立应用主题的办法是将ThemeData提供应MaterialApp结构函数，假如没有提供主题，Flutter将创立一个默许主题，全局主题的运用示例如下：

new MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. brightness: Brightness.light, primarySwatch: Colors.blue, primaryColor: Colors.cyan[600] ), ); 部分主题 除了全局主题外，Flutter还支持创立特有的主题（部分主题）。详细运用时，数据实例化一个ThemeData并将其传送给Theme对象即可，如下所示：

new Theme(data: new ThemeData(accentColor: Colors.yellow), child: null), 当然，还能够扩展父主题，扩展父主题时无须掩盖一切的主题属性，能够经过运用copyWith办法来完成，例如：

floatingActionButton: new Theme( data: Theme.of(context).copyWith(accentColor: Colors.amber), child: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ), Flutter Widget 无状态组件和有状态组件 Flutter将组件分为无状态和有状态两种。其中，无状态组件(StatelessWidget)是不可变的，这意味着它们的属性不能改动，一切的值都是最终的。有状态组件(StatefulWidget)持有状态可能在Widget生命周期中发作变化。

再平常开发中，运用得最多的应该就是有状态组件，要完成一个StatefulWidget至少需求两个类：

一个StatefulWidget类，StatefulWidget类自身是不变的； 一个State类，在Widget生命周期中一直存在。 例如，官方给出的示例就运用了有状态组件。

创立可重用组件 组件普通是在设计和完成阶段由一些类或者模块组成的群组。每个组件完成一个独立的功用, 并且都有一个和其它组件的良好接口。可重用组件是指经过对以往组件停止部分修正或者不修正就能够组成新的软件，可重用组件是可重用软件的根底。

在Flutter开发中，创立可重用组件的方式有很多，最简单就是经过参数的方式，创立一个能够重用的组件，例如：

// Flutter class CustomCard extends StatelessWidget { CustomCard({@required this.index, @required this.onPress}); final index; final Function onPress; @override Widget build(BuildContext context) { return Card( child: Column( children: [ Text('Card $index'), FlatButton( child: const Text('Press'), onPressed: this.onPress, ), ], ) ); } } 然后，在运用的时分，依照参数传入相应的值即可。

...

// Usage CustomCard( index: index, onPress: () { print('Card $index'); }, ) ... 资源管理 再原生应用开发过程中，Android和iOS都有特定的资源管理文件。固然Android将resources 和 assets 区别看待，但在Flutter中它们都会被作为assets处置， 一切存在于Android上res / drawable- *文件夹中的资源都放在Flutter的assets文件夹中。

与Android相似，iOS 同样将 images 和 assets 作为不同的东西，而 Flutter 中只要 assets。被放到 iOS 中 Images.xcasset 文件夹下的资源在 Flutter 中被放到了 assets 文件夹中。

在Flutter开发中，assets 是资源文件的统一称谓，能够用来表示恣意类型的文件，而不只仅是图片。例如，你能够把 json 文件放置到 my-assets 文件夹中，将图片放到image文件中。

假如要访问 my-assets的文件，能够运用 AssetBundle 来访问它，如下所示：

import 'dart:async' show Future; import 'package:flutter/services.dart' show rootBundle; Future loadAsset() async { return await rootBundle.loadString('my-assets/data.json'); } 在原生Android开发中，我们将不同分辨率的图片放到不同的图片文件夹下，如下所示：

mipmap-ldpi 0.75x mipmap-mdpi 1.0x mipmap-hdpi 1.5x mipmap-xhdpi 2.0x mipmap-xxhdpi 3.0x mipmap-xxxhdpi 4.0x iOS 的图片则有1.0x，2.0x和3.0x之分，不同分辨率的手时机自动加载对应分辨率的图片。

对应FLutter图片来说，我们也能够参考这种规则，把1.0x的图片放到 images 文件夹，将2.0x 的图片放到另外的文件夹中，如下所示：

images/my_icon.png // Base: 1.0x image images/2.0x/my_icon.png // 2.0x image images/3.0x/my_icon.png // 3.0x image 包管理 和原生Android和iOS应用开发一样，Flutter的第三方库文件都在pubspec.yaml文件中，假如要运用某个第三方库，能够翻开包仓库地址停止搜索，如下图所示： 在这里插入图片描绘 下面以依赖url_launcher第三方库为例，运用步骤如下：

1， 翻开pubspec.yaml文件，在dependencies下添加包的称号和版本：

url_launcher: ^5.1.1 2，然后，点击Packages get命令来获取工程配置文件中的所添加的援用包，或者翻开命令窗口执行flutter packages get命令，如下图： 在这里插入图片描绘

3，然后，翻开main.dart文件，导入url_launcher.dart包，并运用launch办法来翻开url地址，如下所示：