Flutter常用功能学习：新手入门指南-原创手记-慕课网

概述

本文详细介绍了如何安装和配置Flutter环境，使用基本Widget构建UI，以及处理状态管理和事件。此外，还包括导航与路由、数据持久化与存储的相关知识，帮助开发者快速入门Flutter开发。

Flutter常用功能学习：新手入门指南

引入Flutter

什么是Flutter

Flutter是Google开发的一款开源UI框架，用于构建跨平台的高质量移动应用。它结合了React Native和原生开发的优点，使得开发者能够使用同一套代码库来创建iOS和Android应用。Flutter不仅支持Android和iOS平台，还能够应用于Web、桌面和嵌入式设备等。

Flutter的核心是创建和管理Widget，这些Widget可以是基本的布局元素，也可以是复杂的动画和手势处理。Flutter的widget系统是树状结构，每个应用都有一个根Widget，称为MaterialApp或CupertinoApp，这取决于应用的设计语言是Material Design还是Cupertino（iOS风格）。

Flutter的优势和应用场景

优势

高性能：Flutter使用Skia图形引擎，渲染速度快，动画流畅。
热重载：在开发过程中，可以使用flutter run命令实时预览代码更改，无需每次都重新编译和部署。
跨平台：一套代码支持多个平台，降低了开发和维护成本。
定制化设计：Flutter允许开发者自定义每个UI元素，从字体到颜色都能完全控制。
丰富的库和插件：Flutter拥有大量插件，可以直接集成第三方服务或功能。

应用场景

移动应用开发：适用于各种类型的应用，如社交、电商、教育、健康、企业等。
跨平台Web应用：可以使用web技术栈开发Web应用。
桌面应用开发：支持Windows、macOS和Linux平台的桌面应用开发。
嵌入式设备：适用于智能手表、电视、游戏机等设备。

安装与配置Flutter环境

安装Flutter SDK

安装Flutter SDK
- 访问Flutter的GitHub仓库下载最新的稳定版本：https://github.com/flutter/flutter/releases
- 解压下载的压缩包，将其移动到合适的目录下。
- 设置环境变量。在Windows中，将flutter SDK目录添加到系统PATH环境变量中；在macOS和Linux中，将flutter SDK目录和bin子目录添加到PATH中。

验证安装

打开终端或命令行工具，输入flutter doctor命令检查安装是否成功。

如果安装成功，应该能看到类似以下输出：

Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.22.6, on Mac OS X 10.15.7 19H2 darwin-x64, locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 12.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.54.3)
[✓] Connected device (3 available)

如果有任何警告或错误信息，请根据终端提示进行相应设置，确保环境变量和其他工具都是最新的。

配置开发环境

配置Android开发环境
- 安装JDK
- 下载并安装Android Studio
- 在Android Studio中配置虚拟设备或连接真实设备
配置iOS开发环境
- 安装Xcode
- 创建Apple开发者账户并配置Xcode
- 通过Apple开发者中心获取必要的证书和配置文件
安装Flutter插件
- 对于VS Code，可以使用flutter pub add flutter_launcher_icons命令来安装Flutter插件。
- 使用Flutter插件可以提高开发效率，例如自动美化代码、提供智能提示等。

基础布局与组件

使用基本Widget构建UI

Flutter使用Widget作为构建UI的基础单元。每个Flutter应用都是一个Widget树，最顶层的Widget是MaterialApp或CupertinoApp，这取决于应用的设计风格是Material Design还是iOS风格。

以下是一个简单的Flutter应用示例，展示了如何使用基本Widget构建UI：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

布局管理器：Row, Column, Expanded等

在Flutter中，布局管理器是构建复杂UI的关键。常用的布局管理器包括Row、Column、Expanded、Flexible等。

Row：水平布局，将子Widget按从左到右的顺序排列。
Column：垂直布局，将子Widget按从上到下的顺序排列。
Expanded：用于在Row或Column中分配剩余的空间。
Flexible：类似于Expanded，但允许子Widget占用不同的空间比例。

下面是一个使用Row和Column的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Column(
        children: [
          Container(
            color: Colors.red,
            height: 100,
            child: Row(
              children: [
                Expanded(child: Container(color: Colors.green, height: 100)),
                Expanded(child: Container(color: Colors.blue, height: 100)),
              ],
            ),
          ),
          Container(
            color: Colors.orange,
            height: 100,
          ),
        ],
      ),
    );
  }
}

状态管理和事件处理

状态管理简介

状态管理是Flutter应用中非常重要的概念，它决定了如何处理应用的状态变更。状态管理有多种模式，包括单状态、Provider、Bloc等。

单状态：适用于简单的应用，状态管理相对简单。
Provider：一种轻量级的状态管理解决方案，使用ChangeNotifier来管理状态变更。
Bloc：一种流行的状态管理模式，通过Bloc库来实现。

以下是一个简单的Provider示例：

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

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

事件监听与响应

在Flutter中，可以通过GestureDetector或直接在子Widget上添加事件监听器来处理用户交互。以下是一个使用GestureDetector处理点击事件的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: GestureDetector(
          onTap: () {
            print('Button tapped!');
          },
          child: Container(
            color: Colors.blue,
            width: 200,
            height: 200,
            child: Text('Tap me'),
          ),
        ),
      ),
    );
  }
}

多种状态管理模式实例

为了更全面地展示状态管理，下面分别展示了Provider和Bloc两种模式的代码示例。

Provider 示例

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

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

class Counter with ChangeNotifier {
  int _count = 0;

  int get count => _count;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<Counter>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '${counter.count}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          counter.increment();
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Bloc 示例

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

class CounterBloc extends Bloc<CounterEvent, int> {
  CounterBloc() : super(0);

  @override
  Stream<int> mapEventToState(CounterEvent event) async* {
    if (event is IncrementEvent) {
      yield currentState + 1;
    }
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final CounterBloc _bloc = CounterBloc();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            StreamBuilder<int>(
              stream: _bloc.stream,
              initialData: 0,
              builder: (context, snapshot) {
                return Text(
                  '${snapshot.data}',
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          _bloc.add(IncrementEvent());
        },
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

class IncrementEvent extends CounterEvent {}

abstract class CounterEvent {}

导航与路由

创建和使用路由

在Flutter中，导航和路由管理是通过Navigator来实现的。每个页面可以看作是一个路由，通过push、pop等方法进行页面切换。

以下是一个使用Navigator导航的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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 First Page'),
        ),
      ),
    );
  }
}

导航到不同页面

在Flutter中，可以使用Navigator.push方法导航到新页面。以下是一个使用Navigator.push导航到新页面的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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.push(
              context,
              MaterialPageRoute(builder: (context) => SecondPage()),
            );
          },
          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 First Page'),
        ),
      ),
    );
  }
}

更复杂的导航逻辑

下面展示一个使用Navigator实现栈导航的示例：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/second');
              },
              child: Text('Go to Second Page'),
            ),
            ElevatedButton(
              onPressed: () {
                Navigator.pushNamed(context, '/third');
              },
              child: Text('Go to Third 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 First 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 First Page'),
        ),
      ),
    );
  }
}

数据持久化与存储

使用SharedPreferences保存数据

SharedPreferences是Flutter中用来保存小量数据的工具，支持键值对存储，适用于保存用户偏好设置或简短的信息。

以下是一个使用SharedPreferences保存和读取数据的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String? _storedText;

  Future<void> _saveText(String text) async {
    final prefs = await SharedPreferences.getInstance();
    prefs.setString('storedText', text);
  }

  Future<String?> _loadText() async {
    final prefs = await SharedPreferences.getInstance();
    return prefs.getString('storedText');
  }

  void _loadDataFromSharedPreferences() {
    _loadText().then((value) {
      setState(() {
        _storedText = value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              _saveText(value);
            },
          ),
          ElevatedButton(
            onPressed: () {
              _loadDataFromSharedPreferences();
            },
            child: Text('Load Text'),
          ),
          Text(_storedText ?? ''),
        ],
      ),
    );
  }
}

简单文件的读写操作

在Flutter中，可以使用dart:io库中的File类来读写文件。以下是一个示例代码，展示了如何读写文件：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Future<void> _writeToFile(String content) async {
    final file = File('path/to/your/file.txt');
    await file.writeAsString(content);
  }

  Future<String> _readFromFile() async {
    final file = File('path/to/your/file.txt');
    final contents = await file.readAsString();
    return contents;
  }

  void _readDataFromDisk() {
    _readFromFile().then((value) {
      setState(() {
        _storedText = value;
      });
    });
  }

  String? _storedText;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo Home Page'),
      ),
      body: Column(
        children: [
          TextField(
            onChanged: (value) {
              _writeToFile(value);
            },
          ),
          ElevatedButton(
            onPressed: () {
              _readDataFromDisk();
            },
            child: Text('Read Text'),
          ),
          Text(_storedText ?? ''),
        ],
      ),
    );
  }
}

以上是Flutter常用功能的学习指南，涵盖了从环境配置、基本布局、状态管理、导航、数据持久化等多个方面。希望这些内容能帮助新手快速入门Flutter开发。更多深入的知识可以在慕课网等在线课程平台学习。