首頁手記 Flutter入門學習：一步步輕松掌握Flutter開發

Flutter入門學習：一步步輕松掌握Flutter開發

標簽：

移動開發

本文全面介绍了Flutter入门学习的相关内容，包括Flutter的基本概念、优势和应用场景，以及开发环境的搭建步骤。文章详细讲解了Dart语言基础和Flutter中的基本组件，帮助读者快速上手Flutter开发。此外，还提供了丰富的实战案例和资源推荐，助力开发者深入掌握Flutter技术。

Flutter简介与环境搭建

什么是Flutter

Flutter是谷歌于2017年5月推出的一个开源的UI框架，它允许开发者通过一套代码库来开发Android和iOS应用。Flutter能够提供高性能的原生体验，因为它直接渲染到设备的用户界面，而无需依赖于平台的虚拟机或解释器。Flutter的目标是使开发者能够创建美观、流畅的移动应用，同时保持开发效率。

Flutter的优势与应用场景

优势

跨平台开发：使用同一套代码库同时支持Android和iOS平台。
高性能渲染：Flutter有自己的渲染引擎，采用先进的GPU加速技术，提供接近原生的性能。
热重载：Flutter支持热重载功能，开发者可以在保持应用运行的状态下快速预览代码更改的效果。
丰富的组件库：Flutter自带大量现成的UI组件，这些组件可以很容易地进行自定义和扩展。
自定义字体和图标：Flutter支持自定义字体和图标，允许开发者在应用中使用任何字体和图标。

应用场景

移动端应用开发：适用于各种类型的移动应用，无论是简单的个人应用还是复杂的商业应用。
Web应用开发：Flutter还支持开发Web应用，可以将Flutter应用部署到Web上。
桌面应用开发：Flutter 2.0版本还支持开发Windows、macOS和Linux的桌面应用。
游戏开发：Flutter提供的高性能渲染功能和丰富的动画支持，使得开发游戏变得简单快捷。

开发环境搭建

安装Flutter SDK

下载Flutter SDK

首先，从Flutter官网下载最新版本的Flutter SDK。下载完成后，解压并将其添加到系统的PATH环境变量中。

安装Dart SDK

Flutter依赖于Dart语言，因此需要安装Dart SDK。安装完Dart SDK后，也需要将其添加到环境变量中。

安装IDE

推荐使用VS Code作为开发工具。安装VS Code后，通过扩展市场安装Dart Code插件。这个插件可以提供Flutter项目创建、调试等功能。

配置Android Studio

在Android Studio中安装Flutter插件。打开Android Studio，转到File -> Settings -> Plugins，搜索Flutter插件并安装。

配置Android开发环境

安装Android Studio并配置Android SDK，确保你已经安装了所需的Android SDK版本。在Flutter项目中，你还需要配置一个Android模拟器或连接真实的Android设备。

配置iOS开发环境

如果你还想在iOS上开发应用，你需要安装Xcode，并配置开发者账号。确保你的Mac机器上已经安装了Xcode的Command Line Tools。

创建第一个Flutter项目

使用命令行创建项目

打开命令行工具，运行以下命令创建一个新的Flutter项目：

flutter create my_flutter_app

这会创建一个名为my_flutter_app的新项目。

打开项目

在VS Code中打开生成的项目文件夹，使用Dart Code插件打开项目。

运行项目

在命令行中，导航到项目目录，运行以下命令启动应用：

flutter run

这将启动一个新的Dart VM实例并运行应用。如果连接了Android设备或启动了一个Android模拟器，应用将在该设备上运行。对于iOS应用，你需要连接一个iOS设备或启动一个iOS模拟器。

Flutter基础知识

Dart语言基础

Dart是Flutter应用的主要编程语言。它是一种类C语言的编程语言，语法简单且易于学习。以下是Dart语言的一些基本概念：

变量与类型

变量声明

在Dart中，可以使用var关键字声明变量，但通常推荐使用具体的类型来声明变量，以提高代码的可读性和安全性。

var message = "Hello, Flutter!";
String greeting = "Hello, Dart!";

常量

常量是不可改变的变量，使用const关键字声明。

const int maxCount = 100;

变量作用域

在Dart中，变量的作用域分为局部变量和全局变量。局部变量在函数或代码块内声明，而全局变量在整个文件中有效。

void main() {
  int localVar = 10;
  // localVar仅在main()函数内有效
}

int globalVar = 20;
// globalVar在整个文件内有效

控制流程语句

if语句

if语句用于条件判断。

int age = 18;
if (age >= 18) {
  print("成年人");
} else {
  print("未成年人");
}

for循环

for循环用于重复执行一段代码。

for (int i = 0; i < 5; i++) {
  print("循环计数：$i");
}

while循环

while循环用于在条件为真时重复执行一段代码。

int counter = 0;
while (counter < 5) {
  print("计数：$counter");
  counter++;
}

函数定义

定义函数

使用void关键字表示函数没有返回值，使用return语句返回值。

void sayHello() {
  print("Hello!");
}

String getName() {
  return "Alice";
}

类与对象

定义类

在Dart中，可以使用class关键字定义类。

class Person {
  String name;
  int age;

  Person(this.name, this.age);

  void introduce() {
    print("我叫$name，今年$age岁。");
  }
}

void main() {
  Person p = Person("Tom", 25);
  p.introduce();
}

Flutter中的基本组件

状态管理

StatefulWidget与State

StatefulWidget是一个抽象类，用于创建具有可变状态的组件。State类用于管理组件的状态。

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("计数器"),
      ),
      body: Center(
        child: Text(
          "计数: $_counter",
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

StatelessWidget

StatelessWidget用于创建没有状态的组件，这类组件更加简单和易于管理。

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主页'),
      ),
      body: Center(
        child: Text('这是一个简单的状态组件。'),
      ),
    );
  }
}

路由与导航

简单路由

使用MaterialPageRoute创建一个新的路由。

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(title: 'Flutter Demo Home Page'),
    routes: <String, WidgetBuilder>{
      "/home": (BuildContext context) => MyHomePage(title: "主页"),
    },
  ));
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _navigateToPage() {
    Navigator.pushNamed(context, '/home');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: _navigateToPage,
          child: Text("跳转到主页"),
        ),
      ),
    );
  }
}

命名路由

使用MaterialPageRoute的settings属性定义路由名称。

void main() {
  runApp(MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    initialRoute: '/',
    routes: {
      '/': (BuildContext context) => MyHomePage(title: '主页'),
      '/second': (BuildContext context) => SecondPage(title: '第二页'),
    },
  ));
}

class MyHomePage extends StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: RaisedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text("跳转到第二页"),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  SecondPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Center(
        child: Text("这是一个第二页"),
      ),
    );
  }
}

事件处理

点击事件

使用onTap属性处理点击事件。

RaisedButton(
  onPressed: () {
    print("按钮被点击了");
  },
  child: Text("点击我"),
),

触摸事件

使用GestureDetector来处理触摸事件。

GestureDetector(
  onTap: () {
    print("触摸事件");
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
),

布局与样式

布局方式

Row：水平布局
Column：垂直布局
Expanded：自动调整子元素大小
Flexible：手动调整子元素大小

样式

Text：文本样式
Container：容器样式，包含背景色、边框、圆角等
Theme：主题样式

Text(
  "这是一个文本",
  style: TextStyle(
    fontSize: 20,
    color: Colors.red,
    fontWeight: FontWeight.bold,
  ),
),

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    borderRadius: BorderRadius.circular(10),
    border: Border.all(color: Colors.black, width: 2),
  ),
  child: Center(
    child: Text("这是一个容器"),
  ),
),

Theme(
  data: ThemeData(
    primarySwatch: Colors.blue,
  ),
  child: Scaffold(
    appBar: AppBar(
      title: Text("主题示例"),
    ),
    body: Center(
      child: Text("这是一个带有主题的界面"),
    ),
  ),
)

常用布局组件

`Stack`布局

使用Stack组件来实现重叠布局。

Stack(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        color: Colors.blue,
        width: 50,
        height: 50,
      ),
    ),
  ],
)

`ListView`布局

使用ListView来创建列表布局。

ListView(
  children: <Widget>[
    ListTile(
      title: Text("列表项1"),
    ),
    ListTile(
      title: Text("列表项2"),
    ),
    ListTile(
      title: Text("列表项3"),
    ),
  ],
)

`GridView`布局

使用GridView创建网格布局。

GridView.count(
  crossAxisCount: 3,
  children: List.generate(10, (index) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }),
)

Flutter界面设计

小部件（Widget）详解

核心小部件

`Text`小部件

用于显示文本。

Text(
  "这是一个文本",
  style: TextStyle(
    fontSize: 20,
    color: Colors.red,
  ),
)

`Image`小部件

用于显示图片。

Image(
  image: NetworkImage("https://example.com/image.jpg"),
)

`Container`小部件

用于定义一个容器，可设置背景颜色、边框等样式。

Container(
  width: 100,
  height: 100,
  color: Colors.blue,
  child: Text("这是一个容器"),
)

`RaisedButton`小部件

用于创建带有阴影的按钮。

RaisedButton(
  onPressed: () {},
  child: Text("点击"),
)

`FlatButton`小部件

用于创建扁平化的按钮。

FlatButton(
  onPressed: () {},
  child: Text("点击"),
)

`DropdownButton`小部件

用于创建下拉列表。

DropdownButton<String>(
  value: "选项1",
  onChanged: (String newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
  items: <String>["选项1", "选项2", "选项3"].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
)

`TextField`小部件

用于创建文本输入框。

TextField(
  decoration: InputDecoration(
    labelText: "输入框",
  ),
)

`Checkbox`小部件

用于创建复选框。

Checkbox(
  value: true,
  onChanged: (bool value) {
    setState(() {
      isChecked = value;
    });
  },
)

高级小部件

`AnimatedContainer`小部件

用于创建具有动画效果的容器。

AnimatedContainer(
  width: _width,
  height: _height,
  color: Colors.red,
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
)

`Positioned`小部件

用于在Stack布局中指定子组件的位置。

Stack(
  children: <Widget>[
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.red,
      ),
    ),
    Positioned(
      bottom: 20,
      right: 20,
      child: Container(
        width: 50,
        height: 50,
        color: Colors.blue,
      ),
    ),
  ],
)

混合布局

`Stack`小部件

用于创建重叠布局。

Stack(
  children: <Widget>[
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        color: Colors.blue,
        width: 50,
        height: 50,
      ),
    ),
  ],
)

`Column`小部件

用于创建垂直布局。

Column(
  children: <Widget>[
    Text("第一行"),
    Text("第二行"),
    Text("第三行"),
  ],
)

`Row`小部件

用于创建水平布局。

Row(
  children: <Widget>[
    Text("第一列"),
    Text("第二列"),
    Text("第三列"),
  ],
)

`ListView`小部件

用于创建列表布局。

ListView(
  children: <Widget>[
    ListTile(
      title: Text("列表项1"),
    ),
    ListTile(
      title: Text("列表项2"),
    ),
    ListTile(
      title: Text("列表项3"),
    ),
  ],
)

`GridView`小部件

用于创建网格布局。

GridView.count(
  crossAxisCount: 3,
  children: List.generate(10, (index) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }),
)

常用布局方式

基本布局组件

`Column`布局

用于创建垂直方向的布局。

Column(
  children: [
    Text("第一行"),
    Text("第二行"),
  ],
)

`Row`布局

用于创建水平方向的布局。

Row(
  children: [
    Text("第一列"),
    Text("第二列"),
  ],
)

`Expanded`和`Flexible`

使用这些组件来定义子组件在父布局中的大小。

Row(
  children: [
    Expanded(
      child: Container(
        color: Colors.red,
        width: 50,
        height: 50,
      ),
    ),
    Flexible(
      child: Container(
        color: Colors.blue,
        width: 50,
        height: 50,
      ),
    ),
  ],
)

`ListView`和`GridView`

用于创建列表和网格布局。

ListView(
  children: [
    ListTile(
      title: Text("列表项1"),
    ),
    ListTile(
      title: Text("列表项2"),
    ),
  ],
)

GridView.count(
  crossAxisCount: 3,
  children: List.generate(10, (index) {
    return Container(
      width: 50,
      height: 50,
      color: Colors.primaries[index % Colors.primaries.length],
    );
  }),
)

`Stack`和`Positioned`

用于创建复杂的重叠布局。

Stack(
  children: [
    Container(
      color: Colors.red,
      width: 100,
      height: 100,
    ),
    Positioned(
      top: 20,
      left: 20,
      child: Container(
        color: Colors.blue,
        width: 50,
        height: 50,
      ),
    ),
  ],
)

资源与图像

图像资源

使用本地资源

在assets文件夹中添加图片，然后在pubspec.yaml文件中声明。

flutter:
  assets:
    - assets/images/

使用网络资源

直接通过NetworkImage来加载网络图片。

Image.network(
  "https://example.com/image.jpg",
  width: 100,
  height: 100,
)

图片加载

`Image`小部件

用于加载图片资源。

Image.asset(
  "assets/images/icon.png",
  width: 50,
  height: 50,
)

`CachedNetworkImage`插件

用于加载并缓存网络图片。

CachedNetworkImage(
  imageUrl: "https://example.com/image.jpg",
  width: 100,
  height: 100,
)

Flutter交互与动画

事件处理与用户交互

点击事件

使用onTap属性来处理点击事件。

RaisedButton(
  onPressed: () {
    print("按钮被点击了");
  },
  child: Text("点击我"),
)

滑动事件

使用GestureDetector来处理滑动事件。

GestureDetector(
  onVerticalDragStart: (details) {
    print("开始滑动");
  },
  onVerticalDragEnd: (details) {
    print("结束滑动");
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

长按事件

使用onLongPress属性来处理长按事件。

RaisedButton(
  onPressed: () {},
  onLongPress: () {
    print("长按");
  },
  child: Text("长按我"),
)

基本动画类型

`AnimatedWidget`

用于基于状态的变化来触发动画。

class MyAnimatedWidget extends AnimatedWidget {
  MyAnimatedWidget({Key key, this.value}) : super(key: key, listenable: value);

  final Animation<double> value;

  @override
  Widget build(BuildContext context) {
    final Animation<double> animation = this.value;
    return Container(
      width: 200,
      height: 200,
      color: Colors.primaries[animation.value.toInt()],
    );
  }
}

class MyAnimatedWidgetStatefulWidget extends StatefulWidget {
  MyAnimatedWidgetStatefulWidget({Key key}) : super(key: key);

  @override
  _MyAnimatedWidgetStatefulWidgetState createState() => _MyAnimatedWidgetStatefulWidgetState();
}

class _MyAnimatedWidgetStatefulWidgetState extends State<MyAnimatedWidgetStatefulWidget> with SingleTickerProviderStateMixin {
  AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MyAnimatedWidget(value: CurvedAnimation(parent: _controller, curve: Curves.easeInOut));
  }
}

`AnimatedContainer`

用于创建具有动画效果的容器。

AnimatedContainer(
  width: _width,
  height: _height,
  color: Colors.red,
  duration: Duration(seconds: 1),
  curve: Curves.easeInOut,
)

自定义动画

`AnimationController`

用于控制动画的播放和暂停。

AnimationController _controller;

@override
void initState() {
  super.initState();
  _controller = AnimationController(vsync: this, duration: Duration(seconds: 1));
}

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

void animate() {
  _controller.forward();
}

`Tween`

用于定义动画的起始值和结束值。

Tween<double> _tween = Tween<double>(begin: 0.0, end: 1.0);

Animation<double> _animation = _tween.animate(_controller);

`AnimatedBuilder`

用于根据动画的状态来构建动画。

AnimatedBuilder(
  animation: _animation,
  builder: (context, child) {
    return Container(
      width: 100 + _animation.value * 100,
      height: 100 + _animation.value * 100,
      color: Colors.red,
    );
  },
)

Flutter项目实战

创建简单的Flutter应用

创建项目

使用命令行创建一个新的Flutter项目。

flutter create my_flutter_app

主界面布局

使用Scaffold构建主界面。

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("主页"),
      ),
      body: Center(
        child: Text("这是一个简单的Flutter应用。"),
      ),
    );
  }
}

运行应用

在命令行中运行应用。

flutter run

数据存储与网络请求

存储数据

使用SharedPreferences来存储简单的键值对。

SharedPreferences prefs = await SharedPreferences.getInstance();
prefs.setString("key", "value");
String value = prefs.getString("key");

发送网络请求

使用http库来发送网络请求。

import 'package:http/http.dart' as http;

Future<String> fetchPost() async {
  final response = await http.get(Uri.parse("https://jsonplaceholder.typicode.com/posts/1"));

  if (response.statusCode == 200) {
    return response.body;
  } else {
    throw Exception("Failed to load post");
  }
}

调试与性能优化

调试工具

使用flutter run --debug来启动调试模式。

flutter run --debug

性能优化

减少不必要的布局计算：避免在布局计算中使用复杂的逻辑。
复用组件：尽量重用组件，减少不必要的组件创建。
懒加载：对于列表或网格等大量数据，使用懒加载来减少初始加载时间。
使用ListView.builder：在构建列表时，使用ListView.builder来动态构建列表项。
避免不必要的动画：不要在不需要的动画中浪费资源。

Flutter进阶与资源推荐

Flutter插件与第三方库

官方插件

firebase：用于集成Firebase服务。
google_maps_flutter：用于集成Google Maps。
camera：用于访问设备的相机和传感器。

第三方库

provider：用于状态管理。
flutter_bloc：用于实现BLoC模式。
flutter_hooks：用于Hook模式。

具体使用示例

import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class CounterProvider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => Counter(),
      child: CounterWidget(),
    );
  }
}

class CounterWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);
    return Scaffold(
      appBar: AppBar(
        title: Text("计数器"),
      ),
      body: Center(
        child: Text(
          "计数: ${counter.counter}",
          style: Theme.of(context).textTheme.headline4,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => counter.increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

社区资源与文档推荐

开发者社区

Flutter 官方GitHub仓库
Flutter 官方论坛
Flutter 大本营

Flutter版本更新与未来发展

版本更新

Flutter团队定期发布新版本，每个版本都包含新的特性、优化以及bug修复。开发者可以通过flutter upgrade命令来更新到最新版本。

flutter upgrade

未来发展

性能优化：Flutter团队将继续努力提高渲染性能，减少初始加载时间。
新功能：未来版本将加入更多新功能，如更强大的布局支持、更丰富的动画效果等。
社区支持：Flutter社区将继续扩大，提供更多高质量的第三方插件和库。

Flutter是一个强大的跨平台UI框架，适合开发者快速构建高性能的移动应用。通过不断学习和实践，你将能够构建出更加优秀的Flutter应用。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

米琪卡哇伊

手記
篇

粉絲

4

獲贊與收藏

31

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32087 358

網絡編程入門教程

20個小節 13213 249

Pandas 入門教程

25個小節 19614 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

Flutter入門學習：一步步輕松掌握Flutter開發

优势

应用场景

安装Flutter SDK

下载Flutter SDK

安装Dart SDK

安装IDE

配置Android Studio

配置Android开发环境

配置iOS开发环境

创建第一个Flutter项目

使用命令行创建项目

打开项目

运行项目

变量与类型

变量声明

常量

变量作用域

控制流程语句

if语句

for循环

while循环

函数定义

定义函数

类与对象

定义类

状态管理

StatefulWidget与State

StatelessWidget

路由与导航

简单路由

命名路由

事件处理

点击事件

触摸事件

布局与样式

布局方式

样式

常用布局组件

Stack布局

ListView布局

GridView布局

核心小部件

Text小部件

Image小部件

Container小部件

RaisedButton小部件

FlatButton小部件

DropdownButton小部件

TextField小部件

Checkbox小部件

高级小部件

AnimatedContainer小部件

Positioned小部件

混合布局

Stack小部件

Column小部件

Row小部件

ListView小部件

GridView小部件

基本布局组件

Column布局

Row布局

Expanded和Flexible

ListView和GridView

Stack和Positioned

图像资源

使用本地资源

使用网络资源

图片加载

Image小部件

CachedNetworkImage插件

事件处理与用户交互

点击事件

滑动事件

长按事件

基本动画类型

`Stack`布局

`ListView`布局

`GridView`布局

`Text`小部件

`Image`小部件

`Container`小部件

`RaisedButton`小部件

`FlatButton`小部件

`DropdownButton`小部件

`TextField`小部件

`Checkbox`小部件

`AnimatedContainer`小部件

`Positioned`小部件

`Stack`小部件

`Column`小部件

`Row`小部件

`ListView`小部件

`GridView`小部件

`Column`布局

`Row`布局

`Expanded`和`Flexible`

`ListView`和`GridView`

`Stack`和`Positioned`

`Image`小部件

`CachedNetworkImage`插件

`AnimatedWidget`

`AnimatedContainer`

`AnimationController`

`Tween`

`AnimatedBuilder`