首页手记 Flutter升级学习：从入门到初级实战教程

Flutter升级学习：从入门到初级实战教程

标签：

移动开发

概述

本文详细介绍了Flutter升级学习的全过程，从基础回顾到实战项目演练，涵盖了Flutter的优势、环境配置、基础组件使用、状态管理、导航与路由、异步编程与网络请求等内容，旨在帮助开发者全面掌握Flutter开发技能。

Flutter升级学习：从入门到初级实战教程

Flutter基础回顾

Flutter及其优势

Flutter是由Google开发的开源UI工具包，支持构建跨平台的应用程序。它能够同时运行在Android、iOS、Web、桌面和嵌入式设备上，使用单一代码库即可实现跨多个平台的开发。Flutter采用Dart语言编写，提供丰富的组件库和强大的动画支持，使得界面设计更加美观。此外，Flutter还支持热重载，极大提升了开发效率。

安装Flutter和配置开发环境

安装Flutter需要满足以下条件：

安装最新版的JDK（对于Android开发）。
安装最新版的XCode（对于iOS开发）。
安装Flutter SDK。
安装Android Studio或VS Code，作为集成开发环境（IDE）。

配置开发环境步骤如下：

下载Flutter SDK并将其解压到指定目录。
将Flutter SDK路径添加到系统的环境变量PATH中。
在终端或命令提示符中运行命令flutter doctor，确认安装是否成功。如果存在未解决的问题，flutter doctor会给出相应的提示。

创建并运行第一个Flutter项目

创建并运行一个基本的Flutter项目，步骤如下：

打开命令行工具，运行flutter create first_flutter_app命令创建新项目。
进入项目目录cd first_flutter_app。

在项目的lib/main.dart文件中，可以看到基本的Flutter程序结构。为了在界面上显示“Hello, Flutter!”的文本，可以修改代码为：

import 'package:flutter/material.dart';

void main() {
 runApp(MyApp());
}

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
   return MaterialApp(
     title: 'First Flutter App',
     home: Scaffold(
       appBar: AppBar(
         title: Text('My First App'),
       ),
       body: Center(
         child: Text(
           'Hello, Flutter!',
           style: TextStyle(fontSize: 20),
         ),
       ),
     ),
   );
 }
}

运行项目：在命令行工具中运行flutter run命令，项目将自动编译并运行在默认的模拟器或真机上。

布局与组件

常用布局方式介绍

Flutter提供了多种布局方式，常用的布局包括Column、Row和Stack组件，可以根据不同需求灵活地组织UI元素。

Column：竖直方向上放置多个子元素。
Row：水平方向上放置多个子元素。
Stack：可以将元素堆叠在一起，通常用于重叠元素的布局。

常用组件使用详解

Flutter提供了丰富的组件库，以下是一些常用的组件：

Text：用于显示文本。
Image：用于显示图片。
ElevatedButton：带有阴影效果的按钮。
TextButton：平面按钮，点击时会有点击状态的变化。
DropdownButton：下拉菜单选择组件。

示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Hello, Flutter!',
                style: TextStyle(fontSize: 20),
              ),
              Image.network('https://example.com/image.jpg'), // 网络图片示例
              ElevatedButton(
                onPressed: () {},
                child: Text('Elevated Button'),
              ),
              TextButton(
                onPressed: () {},
                child: Text('Text Button'),
              ),
              DropdownButton<String>(
                value: 'Option 1',
                onChanged: (String newValue) {},
                items: <String>['Option 1', 'Option 2', 'Option 3'].map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
                  );
                }).toList(),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

创建自定义组件

自定义组件可以封装常用的功能，简化代码结构。定义自定义组件的基本步骤如下：

创建一个新的Dart文件，定义新的Widget类。
使用@override关键字重写build方法，返回描述该组件的Widget对象。
在主程序中引用并使用自定义组件。

示例代码如下：

import 'package:flutter/material.dart';

// 定义自定义组件
class CustomButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: () {},
      child: Text('Custom Button'),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: CustomButton(), // 使用自定义组件
        ),
      ),
    );
  }
}

状态管理

状态管理的重要性

状态管理是Flutter应用开发中非常重要的一部分。状态管理可以保证用户界面的响应和交互的正确性，确保用户界面的更新逻辑清晰。

基础状态管理方法介绍

基础的状态管理方法包括：

使用setState更新状态：setState方法用于更新当前状态，触发组件重建。
使用InheritedWidget：提供一个父组件，使得子组件可以访问和共享状态。
使用Provider：一种简单且广泛使用的状态管理方案。

下面简要介绍如何使用InheritedWidget创建简单的状态管理：

import 'package:flutter/material.dart';

class MyState extends InheritedWidget {
  final int count;

  MyState({required this.count, Widget? child}) : super(child: child);

  static MyState of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<MyState>()!;
  }

  @override
  bool updateShouldNotify(InheritedWidget oldWidget) {
    return true;
  }
}

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MyState(
      count: 0,
      child: Scaffold(
        appBar: AppBar(
          title: Text('Counter'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                '${MyState.of(context).count}',
                style: TextStyle(fontSize: 20),
              ),
              ElevatedButton(
                onPressed: () {
                  MyState.of(context).count++;
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

void main() {
  runApp(CounterPage());
}

使用Provider进行状态管理

Provider是一个轻量级的状态管理库，通过ChangeNotifier、Provider和Consumer等类实现状态管理。以下是一个使用Provider管理计数器的例子：

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'You have pushed the button this many times:',
              ),
              Consumer<Counter>(
                builder: (context, counter, child) {
                  return Text(
                    '${counter.count}',
                    style: Theme.of(context).textTheme.headline4,
                  );
                },
              ),
              ElevatedButton(
                onPressed: () {
                  Provider.of<Counter>(context, listen: false).increment();
                },
                child: Text('Increment'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

导航与路由

Flutter中的导航机制

在Flutter中，导航主要用于在不同的页面之间跳转。导航的核心是PageRoute，它定义了页面的过渡动画和生命周期。

创建和管理路由

创建和管理路由可以通过以下步骤实现：

定义新的路由页面。
通过Navigator.push方法实现页面跳转。
在需要新路由的地方，注册路由，并通过Navigator.pushNamed方法跳转。

示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home'),
        ),
      ),
    );
  }
}

导航的高级应用

导航的高级应用包括嵌套路由、传递参数等。嵌套路由允许在当前路由栈中添加新的子路由，而无需移除当前路由。

示例代码如下：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      initialRoute: '/',
      routes: {
        '/': (context) => FirstPage(),
        '/second': (context) => SecondPage(),
        '/third': (context) => ThirdPage(),
      },
    );
  }
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/third');
          },
          child: Text('Go to Third Page'),
        ),
      ),
    );
  }
}

class ThirdPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Third Page'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context); // 返回上一级页面
          },
          child: Text('Back to Second Page'),
        ),
      ),
    );
  }
}

异步编程与网络请求

异步编程基础

在Flutter中，异步编程主要依赖于Future和async/await关键字。Future用于表示异步操作的结果，await用于等待异步操作完成。

示例代码如下：

import 'dart:async';

Future<String> fetchAsyncData() async {
  await Future.delayed(Duration(seconds: 3));
  return 'Data fetched';
}

void main() async {
  print('Fetching data...');
  String data = await fetchAsyncData();
  print(data);
}

使用Dio库进行网络请求

Dio是一个强大的HTTP客户端库，用于网络请求。它支持流式响应处理和错误处理。

安装Dio库：

flutter pub add dio

示例代码如下：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchAsyncData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(
                  snapshot.data!,
                  style: TextStyle(fontSize: 20),
                );
              } else if (snapshot.hasError) {
                return Text(
                  'Error: ${snapshot.error}',
                  style: TextStyle(fontSize: 20, color: Colors.red),
                );
              }
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}

Future<String> fetchAsyncData() async {
  try {
    final response = await Dio().get('https://api.example.com/data');
    return response.data['message'];
  } catch (e) {
    throw Exception('Failed to fetch data');
  }
}

处理异步请求的数据展示

在异步请求完成后，可以使用FutureBuilder来更新UI。FutureBuilder是一个方便的Widget，可以在异步请求的不同状态展示不同的内容。

示例代码如下：

import 'package:flutter/material.dart';
import 'package:dio/dio.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: FutureBuilder<String>(
            future: fetchAsyncData(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return CircularProgressIndicator();
              } else if (snapshot.hasData) {
                return Text(
                  snapshot.data!,
                  style: TextStyle(fontSize: 20),
                );
              } else if (snapshot.hasError) {
                return Text(
                  'Error: ${snapshot.error}',
                  style: TextStyle(fontSize: 20, color: Colors.red),
                );
              }
              return Text('Something went wrong');
            },
          ),
        ),
      ),
    );
  }
}

Future<String> fetchAsyncData() async {
  try {
    final response = await Dio().get('https://api.example.com/data');
    return response.data['message'];
  } catch (e) {
    throw Exception('Failed to fetch data');
  }
}

实战项目演练

项目需求分析

假设你正在开发一个简单的待办事项应用，它具有以下功能：

展示待办事项列表。
添加新的待办事项。
删除已选中的待办事项。
保存当前状态到本地。

分模块实现功能

界面设计

设计主界面布局，包含待办事项列表、添加按钮和状态栏。

import 'package:flutter/material.dart';

class TodoListPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView(
              children: [
                ListTile(
                  title: Text('Go shopping'),
                  trailing: Checkbox(value: true, onChanged: (value) {}),
                ),
                ListTile(
                  title: Text('Finish homework'),
                  trailing: Checkbox(value: false, onChanged: (value) {}),
                ),
              ],
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: ElevatedButton(
              onPressed: () {},
              child: Text('Add Todo'),
            ),
          ),
        ],
      ),
    );
  }
}

添加待办事项

添加待办事项功能，使用TextField获取输入文字，并调用方法将文字添加到列表中。

import 'package:flutter/material.dart';

class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  final TextEditingController _controller = TextEditingController();
  List<String> _todos = [];
  List<bool> _isChecked = [];

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todos.add(_controller.text);
        _isChecked.add(false);
        _controller.clear();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_todos[index]),
                  trailing: Checkbox(
                    value: _isChecked[index],
                    onChanged: (value) {
                      setState(() {
                        _isChecked[index] = value ?? false;
                      });
                    },
                  ),
                  onLongPress: () {
                    _removeTodo(index);
                  },
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter todo item'),
                  ),
                ),
                ElevatedButton(
                  onPressed: _addTodo,
                  child: Text('Add'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  void _removeTodo(int index) {
    setState(() {
      _todos.removeAt(index);
      _isChecked.removeAt(index);
    });
  }
}

删除待办事项

删除待办事项功能，使用Checkbox标记待办事项的状态，并在确认后从列表中删除已选事项。

import 'package:flutter/material.dart';

class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  final TextEditingController _controller = TextEditingController();
  List<String> _todos = [];
  List<bool> _isChecked = [];

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todos.add(_controller.text);
        _isChecked.add(false);
        _controller.clear();
      });
    }
  }

  void _removeTodo(int index) {
    setState(() {
      _todos.removeAt(index);
      _isChecked.removeAt(index);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_todos[index]),
                  trailing: Checkbox(
                    value: _isChecked[index],
                    onChanged: (value) {
                      setState(() {
                        _isChecked[index] = value ?? false;
                      });
                    },
                  ),
                  onLongPress: () {
                    _removeTodo(index);
                  },
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter todo item'),
                  ),
                ),
                ElevatedButton(
                  onPressed: _addTodo,
                  child: Text('Add'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

保存状态到本地

保存当前待办事项列表到本地，可以使用SharedPreferences或Hive等库，以下使用SharedPreferences实现。

import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';

class TodoListPage extends StatefulWidget {
  @override
  _TodoListPageState createState() => _TodoListPageState();
}

class _TodoListPageState extends State<TodoListPage> {
  final TextEditingController _controller = TextEditingController();
  List<String> _todos = [];
  List<bool> _isChecked = [];

  void _addTodo() {
    if (_controller.text.isNotEmpty) {
      setState(() {
        _todos.add(_controller.text);
        _isChecked.add(false);
        _controller.clear();
      });
    }
  }

  void _removeTodo(int index) {
    setState(() {
      _todos.removeAt(index);
      _isChecked.removeAt(index);
    });
  }

  Future<void> _saveTodos() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.setStringList('todos', _todos);
  }

  Future<void> _loadTodos() async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    setState(() {
      _todos = prefs.getStringList('todos') ?? [];
      _isChecked = List.generate(_todos.length, (_) => false);
    });
  }

  @override
  void initState() {
    super.initState();
    _loadTodos();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todo List'),
      ),
      body: Column(
        children: [
          Expanded(
            child: ListView.builder(
              itemCount: _todos.length,
              itemBuilder: (context, index) {
                return ListTile(
                  title: Text(_todos[index]),
                  trailing: Checkbox(
                    value: _isChecked[index],
                    onChanged: (value) {
                      setState(() {
                        _isChecked[index] = value ?? false;
                      });
                    },
                  ),
                  onLongPress: () {
                    _removeTodo(index);
                  },
                );
              },
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Row(
              children: [
                Expanded(
                  child: TextField(
                    controller: _controller,
                    decoration: InputDecoration(hintText: 'Enter todo item'),
                  ),
                ),
                ElevatedButton(
                  onPressed: _addTodo,
                  child: Text('Add'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

项目优化与测试

项目优化可以包括优化界面布局、提高代码可读性和可维护性、处理异常情况等。项目的测试可以通过单元测试、集成测试和UI测试等手段进行。

单元测试示例：

import 'package:test/test.dart';

void main() {
  test('should add todo item', () {
    final controller = TextEditingController();
    final todos = <String>[];
    final isChecked = <bool>[];

    controller.text = 'Test Todo';
    addTodo(controller, todos, isChecked);

    expect(todos.length, 1);
    expect(todos.first, 'Test Todo');
    expect(isChecked.first, false);
  });
}

void addTodo(TextEditingController controller, List<String> todos, List<bool> isChecked) {
  if (controller.text.isNotEmpty) {
    todos.add(controller.text);
    isChecked.add(false);
    controller.clear();
  }
}

集成测试示例：


import 'package:flutter_test/flutter_test.dart';

void main() {
  testWidgets('should display todo list', (WidgetTester tester) async {
    await tester.pumpWidget(MyApp());

    final textFinder = find.text('Go shopping');
    final checkboxFinder = find.byType(Checkbox);

    expect(textFinder, findsOneWidget);
    expect(checkboxFinder, findsWidgets);
  });
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return TodoListPage();
  }
}
``

至此，一个简单的待办事项应用的开发和测试已经完成。建议在开发过程中不断优化代码结构，提高用户体验。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

慕容森

手记
篇

粉丝

183

获赞与收藏

650

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30787 345

网络编程入门教程

20个小节 12720 239

Pandas 入门教程

25个小节 18599 341

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

Flutter升级学习：从入门到初级实战教程

Flutter及其优势

安装Flutter和配置开发环境

创建并运行第一个Flutter项目

常用布局方式介绍

常用组件使用详解

创建自定义组件

状态管理的重要性

基础状态管理方法介绍

使用Provider进行状态管理

Flutter中的导航机制

创建和管理路由

导航的高级应用

异步编程基础

使用Dio库进行网络请求

处理异步请求的数据展示

项目需求分析

分模块实现功能

界面设计

添加待办事项

删除待办事项

保存状态到本地

项目优化与测试

阅读免费教程