Flutter初体验以及认识常用的Widget

最新推荐文章于 2025-11-09 02:13:42 发布

原创

最新推荐文章于 2025-11-09 02:13:42 发布 · 360 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文介绍了Flutter的初步体验，包括如何通过命令行和手动方式创建项目，详细讲解了Flutter的Widget概念，如Stateful和Stateless Widget，并通过实例展示了如何创建自定义Widget。此外，还提到了MaterialApp、ListView、Model和数据源的创建，以及Text、Row、Column和Stack等常用Widget的使用方法。

前言

2020年注定是Flutter疯狂的一年，从19年开始，Flutter的热度就一直高居不下，不管是前端开发者还是移动端的开发者，都对这门新的技术产生了浓厚的兴趣。无独有偶，我也在自己尝试了一番之后，决定做一个Flutter相关系列的文章分享。希望通过我的学习记录的方式，带大家一步步的去探索Flutter。本次demo地址：https://github.com/Spr1ngHall/FlutterDemo
创建并运行项目
首先我们在创建项目之前，为了确保环境是ok的，我们在命令行敲

flutter doctor

用来检察一下环境是否配置ok。

薛立恒@xuelihengdeMacBookPro  ~/Desktop  flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.5.4-hotfix.2, on Mac OS X 10.14.5 18F132, locale
    zh-Hans-CN)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] iOS toolchain - develop for iOS devices (Xcode 10.2.1)
[✓] Android Studio (version 3.4)
[✓] VS Code (version 1.35.1)
[✓] Connected device (1 available)

界面显示这个打印信息才能说明你的所有环境配置都是ok的，如果不ok，就参考我的前一篇文章。
这给打击介绍两种创建项目的方法，一种是命令行的形式，一种是手动。

1、命令行形式创建项目

首先cd到你想要创建项目的路径文件夹

cd /Users/xueliheng/Desktop/Flutter/FlutterDemo

接下来我们运行一句命令

flutter create hello_flutter

那么我们就在相应的文件夹里面能看到我们创建的hello_flutter。这里可能有一些人就要问了，为什么这里创建工程的名字不用大写？这里就要说明一下，Flutter在创建项目的时候，是跟iOS的命名规则不一样的，他们所有的文件夹，包括项目中创建的文件名都不是不能含有大写字母的，如果含有大写字母，会报下面的错误。

在这里插入图片描述
接着我们来认识一下创建的项目:

在这里插入图片描述

android和ios就分别是不同的两个工程的工程文件，这个一般不会动，需要动的时候，大概也是的到项目混合开发的阶段，到时候再说吧。
然后lib文件就是装.dart为结尾的代码文件的。这里面也就是我们需要写的flutter工程源码。
然后test是自动化测试用的。
这里的pubspec.lock和pubspec.yaml这两个文件，大家可以直接联想成为iOS里面的podspec和podfile.lock文件，功能很类似。
接下来我们进入到hello_flutter这个Demo里面去：

cd hello_flutter

继续敲：

flutter run

那么项目就会自动打开。这里还是要说明一下，如果你同时开启了两个模拟器，那么这个时候敲击上面这个命令的时候，flutter会报一个错误，会让你选择一个具体的模拟器去运行项目。同时也把模拟器的信息都打印出来了，这个时候你只需要选择一个执行就行了：

flutter run -d 'iPhone Xʀ'

或者是运行到所有的模拟器上面：

flutter run -d all

我们再运行项目之后，模拟器的打印如下：

薛立恒@xuelihengdeMacBookPro  ~/Desktop/Flutter/FlutterDemo/hello_flutter  flutter run
Launching lib/main.dart on iPhone Xʀ in debug mode...
Running Xcode build...
 ├─Assembling Flutter resources...                           1.3s
 └─Compiling, linking and signing...                         3.7s
Xcode build done.                                            6.4s
Syncing files to device iPhone Xʀ...                             1,650ms

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild
state), press "R".
An Observatory debugger and profiler on iPhone Xʀ is available at:
http://127.0.0.1:62574/dpTTmbSopM8=/
For a more detailed help message, press "h". To detach, press "d"; to quit,
press "q".

这里有一个提示，让你敲r或者R，其实意思就是如果你需要重新build一下项目，就输入R，如果你敲r的意思就是，启动热重载。热重载是flutter的特色功能，能在不build项目的同时也能看到模拟器上面的东西在变动，所见即所得，这个真是iOS开发的一个福音啊！按q的话就是退出。