Flutter 从零开始 002 创建第一个flutter项目

1.创建并运行一个Flutter App工程

---

打开Android studio（简称AS）>File>New>New Flutter Project
选择一个模仿器，点击旁边的run 按钮

第一次编译项目时间比较长，耐心等待即可，运行完成 如下图

2.项目基本文件目录

---

Flutter项目主要分为Android，iOS，lib，pubspec.yaml这四个，其中lib下就是用来flutter开辟的，我们的dart文件就放在这里，pubspec.yaml文件就是flutter的构建管理工具，就和Android 的gradle 一样

2. name: flutter001
4. description: A new Flutter project.
8. # The following line prevents the package from being accidentally published to
10. # pub.dev using `flutter pub publish`. This is preferred for private packages.
12. publish_to: 'none' # Remove this line if you wish to publish to pub.dev
16. # The following defines the version and build number for your application.
18. # A version number is three numbers separated by dots, like 1.2.43
20. # followed by an optional build number separated by a +.
22. # Both the version and the builder number may be overridden in flutter
24. # build by specifying --build-name and --build-number, respectively.
26. # In Android, build-name is used as versionName while build-number used as versionCode.
28. # Read more about Android versioning at https://developer.android.com/studio/publish/versioning
30. # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.
32. # Read more about iOS versioning at
34. # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
36. version: 1.0.0+1
40. environment:
42.   sdk: ">=2.16.1 <3.0.0"
46. # Dependencies specify other packages that your package needs in order to work.
48. # To automatically upgrade your package dependencies to the latest versions
50. # consider running `flutter pub upgrade --major-versions`. Alternatively,
52. # dependencies can be manually updated by changing the version numbers below to
54. # the latest version available on pub.dev. To see which dependencies have newer
56. # versions available, run `flutter pub outdated`.
58. dependencies:
60.   flutter:
62.     sdk: flutter
68.   # The following adds the Cupertino Icons font to your application.
70.   # Use with the CupertinoIcons class for iOS style icons.
72.   cupertino_icons: ^1.0.2
76. dev_dependencies:
78.   flutter_test:
80.     sdk: flutter
84.   # The "flutter_lints" package below contains a set of recommended lints to
86.   # encourage good coding practices. The lint set provided by the package is
88.   # activated in the `analysis_options.yaml` file located at the root of your
90.   # package. See that file for information about deactivating specific lint
92.   # rules and activating additional ones.
94.   flutter_lints: ^1.0.0
98. # For information on the generic Dart part of this file, see the
100. # following page: https://dart.dev/tools/pub/pubspec
104. # The following section is specific to Flutter.
106. flutter:
110.   # The following line ensures that the Material Icons font is
112.   # included with your application, so that you can use the icons in
114.   # the material Icons class.
116.   uses-material-design: true
120.   # To add assets to your application, add an assets section, like this:
122.   # assets:
124.   #   - images/a_dot_burr.jpeg
126.   #   - images/a_dot_ham.jpeg
130.   # An image asset can refer to one or more resolution-specific "variants", see
132.   # https://flutter.dev/assets-and-images/#resolution-aware.
136.   # For details regarding adding assets from package dependencies, see
138.   # https://flutter.dev/assets-and-images/#from-packages
142.   # To add custom fonts to your application, add a fonts section here,
144.   # in this "flutter" section. Each entry in this list should have a
146.   # "family" key with the font family name, and a "fonts" key with a
148.   # list giving the asset and other descriptors for the font. For
150.   # example:
152.   # fonts:
154.   #   - family: Schyler
156.   #     fonts:
158.   #       - asset: fonts/Schyler-Regular.ttf
160.   #       - asset: fonts/Schyler-Italic.ttf
162.   #         style: italic
164.   #   - family: Trajan Pro
166.   #     fonts:
168.   #       - asset: fonts/TrajanPro.ttf
170.   #       - asset: fonts/TrajanPro_Bold.ttf
172.   #         weight: 700
174.   #
176.   # For details regarding fonts from package dependencies,
178.   # see https://flutter.dev/custom-fonts/#from-packages

复制代码

这内里就是对工程的配置，库的依赖，资源的依赖等
3. 项目简介

这是Flutter的入口函数，runApp启动的Widget

2. void main() => runApp(MyApp());

复制代码

MyApp类代表 Flutter 应用，它继承了 StatelessWidget类，这也就意味着应用本身也是一个widget。
在 Flutter 中，大多数东西都是 widget（后同“组件”或“部件”），包罗对齐（Align）、填充（Padding）、手势处理（GestureDetector）等，它们都是以 widget 的形式提供。
Flutter 在构建页面时，会调用组件的build方法，widget 的主要工作是提供一个 build() 方法来描述如何构建 UI 界面（通常是通过组合、拼装其它底子 widget ）。
MaterialApp 是Material 库中提供的 Flutter APP 框架，通过它可以设置应用的名称、主题、语言、首页及路由列表等。MaterialApp也是一个 widget。
home 为 Flutter 应用的首页，它也是一个 widget。

MyHomePage 是应用的首页，它继承自StatefulWidget类，表示它是一个有状态的组件**（Statefulwidget）**。关于有状态组件和无状态组件，我在后面会和大家讲，现在只需要知道他是一个有状态组件就可以了。
Statefulwidget 可以拥有状态，这些状态在 widget 生命周期中是可以变的，而 Statelesswidget 是不可变的。
Stateful widget 至少由两个类构成：
一个StatefulWidget类。
一个 State类； StatefulWidget类本身是稳定的，但是State类中持有的状态在 widget 生命周期中可能会发生变化。
_MyHomePageState类是MyHomePage类对应的状态类。看到这里，读者可能已经发现：和MyApp 类不同， MyHomePage类中并没有build方法，取而代之的是，build方法被挪到了**_MyHomePageState**方法中。

State类

接下来，我们看看**_MyHomePageState**中都包含哪些东西：
该组件的状态。由于我们只需要维护一个点击次数计数器，所以界说一个**_counter**状态：

2. int _counter = 0; //用于记录按钮点击的总次数

复制代码

_counter 为生存屏幕右下角带“+”号按钮点击次数的状态。
设置状态的自增函数。

2.   void _incrementCounter() {
4.     setState(() {
6.       _counter++;
8.     });
10.   }

复制代码

当按钮点击时，会调用此函数，该函数的作用是先自增**_counter**，然后调用setState 方法。setState方法的作用是通知 Flutter 框架，有状态发生了改变，Flutter 框架收到通知后，会执行 build 方法来根据新的状态重新构建界面， Flutter 对此方法做了优化，使重新执行变的很快，所以你可以重新构建任何需要更新的东西，而无需分别去修改各个 widget。
构建UI界面

构建UI界面的逻辑在 build 方法中，当MyHomePage第一次创建时，_MyHomePageState类会被创建，当初始化完成后，Flutter框架会调用 widget 的build方法来构建 widget 树，最终将 widget 树渲染到装备屏幕上。所以，我们看看**_MyHomePageState的build**方法中都干了什么事：

2. @override
4.   Widget build(BuildContext context) {
8.     return Scaffold(
10.       appBar: AppBar(

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。