Flutter 进阶：状态管理、路由与网络请求入门

在上一篇中，我们了解了 Flutter 的基本概念和 Widget。本文将带你进一步学习三个关键主题：状态管理、路由导航和网络请求，帮助你构建更完整的应用。

1. 状态管理：Provider 的简单使用

setState 适合局部状态，但当多个页面需要共享数据时，推荐使用 Provider。首先在 pubspec.yaml 中添加依赖：

dependencies:
  provider: ^6.0.0

创建一个简单的计数器模型：

import 'package:flutter/foundation.dart';

class CounterModel extends ChangeNotifier {
  int _count = 0;
  int get count => _count;

  void increment() {
    _count++;
    notifyListeners(); // 通知所有监听者
  }
}

在应用根部注册：

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

在页面中使用：

class CounterPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final counter = Provider.of<CounterModel>(context);
    return Scaffold(
      body: Center(
        child: Text('计数：${counter.count}'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: counter.increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

2. 路由与导航

Flutter 使用 Navigator 管理页面栈。常用两种方式：

方式一：直接跳转

Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

方式二：命名路由

在 MaterialApp 中定义路由表：

MaterialApp(
  routes: {
    '/': (context) => HomePage(),
    '/detail': (context) => DetailPage(),
  },
);

跳转并传递参数：

Navigator.pushNamed(
  context,
  '/detail',
  arguments: {'id': 123},
);

在目标页面接收参数：

class DetailPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    return Scaffold(
      appBar: AppBar(title: Text('详情页')),
      body: Center(child: Text('ID: ${args['id']}')),
    );
  }
}

3. 网络请求：使用 http 包

添加依赖：

dependencies:
  http: ^1.1.0

发起 GET 请求并解析 JSON：

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

Future<List<dynamic>> fetchPosts() async {
  final response = await http.get(
    Uri.parse('https://jsonplaceholder.typicode.com/posts'),
  );
  if (response.statusCode == 200) {
    return jsonDecode(response.body);
  } else {
    throw Exception('请求失败');
  }
}

配合 FutureBuilder 显示数据：

FutureBuilder<List<dynamic>>(
  future: fetchPosts(),
  builder: (context, snapshot) {
    if (snapshot.connectionState == ConnectionState.waiting) {
      return CircularProgressIndicator();
    } else if (snapshot.hasError) {
      return Text('错误：${snapshot.error}');
    } else {
      final posts = snapshot.data!;
      return ListView.builder(
        itemCount: posts.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(posts[index]['title']),
          );
        },
      );
    }
  },
)

4. 动画基础

Flutter 内置了丰富的动画 API。最简单的隐式动画：

AnimatedContainer(
  duration: Duration(milliseconds: 300),
  width: _isExpanded ? 200 : 100,
  height: _isExpanded ? 200 : 100,
  color: _isExpanded ? Colors.blue : Colors.red,
)

通过改变 _isExpanded 的值，容器会自动过渡。

5. 后续学习方向

• 深入学习 Riverpod 或 Bloc 等更强大的状态管理方案。
• 掌握 Dio 网络库，支持拦截器和文件上传。
• 了解 自定义绘制（CustomPainter）和 动画控制器。
• 尝试接入数据库（如 sqflite）和本地存储。

掌握这些进阶内容后，你就能独立开发功能完整的 Flutter 应用了。继续加油！