Flutter升级入门介绍了Flutter的基础概念、优势和应用场景，涵盖了环境搭建、第一个Flutter应用的创建以及常用Widget的使用。文章还详细讲解了基本UI设计与布局、路由与导航等内容，帮助开发者快速掌握Flutter开发技巧。
Flutter基础简介
什么是Flutter
Flutter是由Google开发的开源UI框架，它允许开发者使用单个代码库为多个平台开发移动和桌面应用程序。Flutter使用Dart编程语言编写，旨在提供快速的开发体验和高性能的原生应用，同时保持高度的可定制性。Flutter框架包括丰富的UI组件、动画、手势识别等功能，使开发者能够快速创建高质量的应用程序。
Flutter的优势
- 快速开发：Flutter使用热重载（Hot Reload）功能，允许开发者在不重启应用程序的情况下查看代码更改的效果。这大大加快了开发速度和测试周期。
- 高性能：Flutter使用自己的渲染引擎，直接绘制到设备的屏幕上，从而避免了中间层的抽象，确保了应用的性能接近原生应用。
- 跨平台：使用单个代码库可以在多个平台上（如Android、iOS、Web、Windows、macOS和Linux）构建应用，减少了开发和维护多个版本的复杂性。
- 美观的UI：Flutter提供丰富的、高度定制化的UI组件，使得开发者能够轻松创建美观且一致的用户界面。
- 插件生态系统：Flutter拥有活跃的社区支持和丰富的插件生态系统，可以轻松访问各种平台的特性和服务。
- Dart语言：Dart是一种强大的面向对象语言，适合构建高效、可维护的应用程序。
- 可定制性：Flutter允许开发者从头开始自定义每一个组件，支持高度定制化的UI设计。
Flutter的应用场景
- 移动应用开发：Flutter广泛应用于iOS和Android应用开发，尤其是在需要快速原型设计或迭代的项目中。
- 跨平台开发：Flutter特别适合需要同时支持多个平台的应用，如需要在Android、iOS、Web等多个平台上发布的应用。
- 企业应用：企业应用通常需要在多个设备上运行，Flutter的跨平台能力使得开发和维护成本大大降低。
- 游戏开发：Flutter也适用于简单的游戏开发，特别是那些需要快速迭代和原型设计的游戏。
- Web应用开发：随着Flutter支持Web开发，越来越多的开发者开始使用Flutter来开发跨平台的Web应用。
环境搭建与配置
安装Flutter SDK
- 下载Flutter SDK：访问Flutter官网，点击“Get Started”下载适用于您的操作系统的Flutter SDK包。
- 解压文件：将下载的压缩文件解压到您的计算机上的某个目录，例如
C:\flutter（Windows），/usr/local/flutter（Linux），或/Users/yourusername/flutter（macOS）。 - 添加环境变量：将Flutter SDK的路径添加到系统的环境变量中。对于Windows，可以在“系统属性”中修改“环境变量”，添加
%FLUTTER_ROOT%\bin到Path中；对于Linux和macOS，可以在.bashrc或.zshrc文件中添加路径。export PATH="$PATH:/path/to/flutter/bin" - 安装依赖项：确保安装了Flutter需要的依赖项，如Java Development Kit（JDK）、Android SDK、Android Studio等。对于Windows，还需要安装Visual Studio的Build Tools。
设置开发环境
- 安装Android SDK和Android Studio：
- 访问Android开发者网站，下载并安装Android Studio。
- 打开Android Studio，进入SDK Manager，安装必要的Android SDK平台和工具。
flutter doctor --android-licenses
- 安装Visual Studio Code（可选）：
- 访问Visual Studio Code官网，下载并安装。
- 安装Flutter和Dart插件，这些插件提供了语法高亮、代码补全等功能。
- 配置VS Code：
- 在VS Code中打开命令面板（Ctrl+Shift+P），输入
Flutter: Set Flutter SDK path，选择你的Flutter SDK路径。 - 安装Flutter插件：点击Extension（扩展）按钮，搜索“Flutter”和“Dart”，安装这两个插件。
- 在VS Code中打开命令面板（Ctrl+Shift+P），输入
验证Flutter安装
- 验证Flutter版本：
- 在命令行中输入
flutter --version，确认Flutter已经正确安装并且可以访问。flutter --version输出将显示版本号和安装路径，例如：
Flutter 1.22.6 • channel stable • https://github.com/flutter/flutter.git Framework • revision 9891a6ff62 • 2021-01-22 17:24:34 • hotfix/1.22.6 Engine • revision 2ccca85867 Dart • version 2.10.5
- 在命令行中输入
- 验证Dart版本：
- 输入
dart --version，确认安装的Dart版本。dart --version输出类似于：
Dart VM version: 2.12.0 (stable) (Tue Apr 20 13:57:13 2021 +0200) on "linux_x64"
- 输入
- 验证Flutter Doctor：
- 运行
flutter doctor命令，确保所有必要组件都已正确安装。flutter doctor输出示例：
Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 1.22.6, Windows 10.0.19041) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [√] Android Studio (version 4.1.0) [√] VS Code (version 1.55.2) [√] Flutter plugin (version 0.22.1) [√] Dart plugin (version 203.7759)
- 运行
第一个Flutter应用
创建Flutter项目
- 创建新的Flutter项目：
- 在命令行中进入项目目录，运行
flutter create hello_world，创建一个名为hello_world的新项目。flutter create hello_world这将创建一个包含所有必要文件的新目录。
- 在命令行中进入项目目录，运行
- 打开项目：
- 使用VS Code打开项目的
hello_world目录。 - 打开
lib/main.dart文件，这是应用程序的主入口点。
- 使用VS Code打开项目的
项目结构解析
hello_world文件夹：这是整个项目的根目录。android文件夹：包含Android平台的项目文件。ios文件夹：包含iOS平台的项目文件。lib文件夹：包含应用程序的主要源代码。lib/main.dart文件：程序的主入口点。pubspec.yaml文件：包含项目依赖项和资源文件的配置。.idea、.git、test等其他文件夹：包含IDE配置、版本控制信息和其他测试文件。
运行第一个应用
- 运行应用：
- 在命令行中进入项目目录，运行
flutter run。cd hello_world flutter run输出示例：
Launching lib/main.dart on Android SDK built for x86 in debug mode... Running Gradle task 'assembleDebug'... Built build\app\outputs\flutter-build\debug\app.apk. Initializing gradle... Resolving dependencies... Running Gradle task 'assembleDebug'... Built build\app\outputs\flutter-build\debug\app.apk. Syncing files to device Android SDK built for x86...应用程序将在模拟器或连接的设备上启动。
- 在命令行中进入项目目录，运行
- 热重载：
- 编辑
main.dart文件并保存，然后在命令行中输入flutter run --hot，应用程序将在不关闭的情况下重新启动并显示更改。flutter run --hot
- 编辑
常用Widget介绍
Text 和 Image Widget
-
Text Widget：用于显示文本内容。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Hello, Flutter!'), ), body: Center( child: Text( 'Hello, World!', style: TextStyle( fontSize: 20.0, color: Colors.blue, ), ), ), ), ); } }上述代码将在屏幕中央显示蓝色的“Hello, World!”文本。
-
Image Widget：用于显示图片。
Image.asset('assets/images/my_image.png'),该代码将显示项目资源文件夹下的
my_image.png图片。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Image Widget Example'), ), body: Center( child: Image.asset('assets/images/my_image.png'), ), ), ); } }在
ImageWidget中，可以使用Image.network(url)来显示网络图片。Image.network('https://example.com/my_image.png'),
Button和Input Field
-
Button Widget：用于创建按钮。
ElevatedButton( onPressed: () { // 按钮点击事件 }, child: Text('Click Me'), ),上述代码创建了一个带有点击事件的按钮，点击时执行指定的回调函数。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Button Example'), ), body: Center( child: ElevatedButton( onPressed: () { print('Button clicked!'); }, child: Text('Click Me'), ), ), ), ); } } -
Input Field Widget：用于创建输入框。
TextField( decoration: InputDecoration( labelText: 'Enter your name', hintText: 'Your name', ), ),该代码创建了一个带有标签和提示文本的文本输入框。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('TextField Example'), ), body: Padding( padding: EdgeInsets.all(16.0), child: TextField( decoration: InputDecoration( labelText: 'Enter your name', hintText: 'Your name', ), ), ), ), ); } }
Layout Widgets（Row，Column，Stack等）
-
Row Widget：用于水平排列子Widget。
Row( children: [ Text('First'), Text('Second'), ], ),该代码水平排列两个文本组件。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Row Example'), ), body: Center( child: Row( children: [ Text('First'), Text('Second'), ], ), ), ), ); } } -
Column Widget：用于垂直排列子Widget。
Column( children: [ Text('First'), Text('Second'), ], ),该代码垂直排列两个文本组件。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Column Example'), ), body: Center( child: Column( children: [ Text('First'), Text('Second'), ], ), ), ), ); } } -
Stack Widget：用于堆叠多个Widget。
Stack( children: [ Text('Bottom'), Positioned( top: 20, left: 20, child: Text('Top Left'), ), Positioned( top: 50, right: 20, child: Text('Top Right'), ), ], ),该代码将一个基础文本与两个位置固定的文本堆叠在一起。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Stack Example'), ), body: Center( child: Stack( children: [ Text('Bottom'), Positioned( top: 20, left: 20, child: Text('Top Left'), ), Positioned( top: 50, right: 20, child: Text('Top Right'), ), ], ), ), ), ); } }
基本UI设计与布局
布局基础
- 基础布局组件：Flutter提供了多种布局组件，如
Row、Column、Stack等，用于构建复杂的布局结构。 -
Flex布局：使用
Flex容器可以实现灵活的布局，通过flex属性控制子元素的相对大小。Expanded( flex: 2, child: Text('Double Width'), ), Expanded( flex: 1, child: Text('Single Width'), ),在
Row或Column中使用Expanded，可以让子元素根据flex属性的比例分配空间。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Flex Layout Example'), ), body: Center( child: Row( children: [ Expanded( flex: 2, child: Text('Double Width'), ), Expanded( flex: 1, child: Text('Single Width'), ), ], ), ), ), ); } } -
Wrap布局：使用
Wrap容器可以将子元素自动换行排列。Wrap( spacing: 8.0, runSpacing: 4.0, children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], ),Wrap支持自定义spacing和runSpacing来调整子元素之间的间距。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Wrap Layout Example'), ), body: Center( child: Wrap( spacing: 8.0, runSpacing: 4.0, children: [ Text('Item 1'), Text('Item 2'), Text('Item 3'), ], ), ), ), ); } } -
Align和Center布局：使用
Align和Center可以将子元素居中或对齐到父容器的某个位置。Align( alignment: Alignment.center, child: Text('Centered Text'), ), Center( child: Text('Centered Text'), ),import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Align Center Example'), ), body: Center( child: Column( children: [ Align( alignment: Alignment.center, child: Text('Centered Text'), ), Center( child: Text('Centered Text'), ), ], ), ), ), ); } }
常用布局技巧
-
使用BoxConstraints控制大小：可以通过设置
BoxConstraints来控制子元素的最小和最大尺寸。ConstrainedBox( constraints: BoxConstraints( minWidth: 100.0, maxWidth: 200.0, minHeight: 50.0, maxHeight: 100.0, ), child: Text('Constrained Text'), ),import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('BoxConstraints Example'), ), body: Center( child: ConstrainedBox( constraints: BoxConstraints( minWidth: 100.0, maxWidth: 200.0, minHeight: 50.0, maxHeight: 100.0, ), child: Text('Constrained Text'), ), ), ), ); } } -
使用Padding和Margin：可以在Widget周围添加内边距和外边距，以调整布局。
Padding( padding: EdgeInsets.all(10.0), child: Text('Padded Text'), ), Container( margin: EdgeInsets.all(10.0), child: Text('Margin Text'), ),import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Padding Margin Example'), ), body: Center( child: Column( children: [ Padding( padding: EdgeInsets.all(10.0), child: Text('Padded Text'), ), Container( margin: EdgeInsets.all(10.0), child: Text('Margin Text'), ), ], ), ), ), ); } } -
使用Expanded和Flexible：这些Widget可以确保子元素在Flex容器中正确分配空间。
Row( children: [ Expanded( flex: 1, child: Text('Flex 1'), ), Expanded( flex: 2, child: Text('Flex 2'), ), ], ),import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Expanded Flexible Example'), ), body: Center( child: Row( children: [ Expanded( flex: 1, child: Text('Flex 1'), ), Expanded( flex: 2, child: Text('Flex 2'), ), ], ), ), ), ); } } -
使用AspectRatio布局：确保子元素保持特定的宽高比。
AspectRatio( aspectRatio: 16 / 9, child: Container( color: Colors.red, ), ),import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('AspectRatio Example'), ), body: Center( child: AspectRatio( aspectRatio: 16 / 9, child: Container( color: Colors.red, ), ), ), ), ); } }
响应式设计简介
-
MediaQuery：使用
MediaQuery可以获取屏幕尺寸、设备方向等信息。double screenWidth = MediaQuery.of(context).size.width; double screenHeight = MediaQuery.of(context).size.height;通过
MediaQuery，可以动态调整布局，适应不同屏幕尺寸。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('MediaQuery Example'), ), body: Center( child: Text('Screen Width: ${MediaQuery.of(context).size.width}'), ), ), ); } } -
Responsive Layout Builder：使用
LayoutBuilder可以构建自适应布局。LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth < 600) { return Column( children: [ Text('Column Layout'), ], ); } else { return Row( children: [ Text('Row Layout'), ], ); } }, ),LayoutBuilder可以根据屏幕宽度动态选择布局方式。import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Responsive Layout Example'), ), body: Center( child: LayoutBuilder( builder: (context, constraints) { if (constraints.maxWidth < 600) { return Column( children: [ Text('Column Layout'), ], ); } else { return Row( children: [ Text('Row Layout'), ], ); } }, ), ), ), ); } }
路由与导航
创建多页面应用
-
创建新的页面：可以使用
flutter create命令创建新的页面，或者直接在lib目录下创建一个新的Dart文件。flutter create page_example创建一个新的页面，例如
PageExample.dart。import 'package:flutter/material.dart'; class PageExample extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Page Example'), ), body: Center( child: Text('This is Page Example'), ), ); } } -
导航到新页面：使用
Navigator来导航到新页面。Navigator.push( context, MaterialPageRoute(builder: (context) => PageExample()), );该代码将在当前页面上导航到
PageExample页面。import 'package:flutter/material.dart'; import 'page_example.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Main Page'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => PageExample()), ); }, child: Text('Go to Page Example'), ), ), ), ); } }
页面间导航
- 使用Navigator.push：用于导航到新页面。
Navigator.push( context, MaterialPageRoute(builder: (context) => PageExample()), );该代码将导航到
PageExample页面。 - 使用Navigator.pushReplacement：用于导航到新页面，并从导航栈中移除当前页面。
Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => PageExample()), ); -
使用Navigator.pop：用于返回到上一个页面。
Navigator.pop(context);该代码将返回到上一个页面。
import 'package:flutter/material.dart'; import 'page_example.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Main Page'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute(builder: (context) => PageExample()), ); }, child: Text('Go to Page Example'), ), ), ), ); } }
传递数据给新页面
- 使用全局变量：在一个页面中设置全局变量，在另一个页面中访问该变量。
class MyPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('My Page'), ), body: Center( child: Text('Global Variable: $globalData'), ), ); } }该代码通过全局变量
globalData传递数据。 -
使用
InheritedWidget：通过InheritedWidget传递数据，确保子树中的所有Widget都能访问数据。class MyInheritedWidget extends InheritedWidget { final String data; MyInheritedWidget({required this.data, required Widget child}) : super(child: child); @override bool updateShouldNotify(MyInheritedWidget oldWidget) { return oldWidget.data != data; } } class MyPage extends StatelessWidget { @override Widget build(BuildContext context) { final data = MyInheritedWidget.of(context).data; return Scaffold( appBar: AppBar( title: Text('My Page'), ), body: Center( child: Text('InheritedWidget Data: $data'), ), ); } } -
使用
Navigator传递参数：在导航到新页面时传递参数。Navigator.push( context, MaterialPageRoute( builder: (context) => PageExample(data: 'Hello from Main Page'), ), );接收参数的页面：
class PageExample extends StatelessWidget { final String data; PageExample({required this.data}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Page Example'), ), body: Center( child: Text('Received Data: $data'), ), ); } }该代码通过参数传递数据，并在新页面中显示数据。
import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Main Page'), ), body: Center( child: ElevatedButton( onPressed: () { Navigator.push( context, MaterialPageRoute( builder: (context) => PageExample(data: 'Hello from Main Page'), ), ); }, child: Text('Go to Page Example'), ), ), ), ); } } class PageExample extends StatelessWidget { final String data; PageExample({required this.data}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Page Example'), ), body: Center( child: Text('Received Data: $data'), ), ); } }
随时随地看视频
