Flutter语法入门：从零开始搭建你的第一款应用

Flutter 是由 Google 开发的开源框架，主要用于构建高性能的原生移动应用。它采用了全新的设计理念和开发流程，将 UI 和业务逻辑分离，大幅度提高了开发效率。Flutter 的组件可以复用在 Android、iOS、Windows、MacOS 和 Web 等平台上，使得开发者能使用一套代码库就可实现跨平台开发。

基础概念

项目结构

Flutter 项目的结构通常包括以下部分：

• lib：存放所有源代码文件。
• main.dart 或 app.dart：项目的入口文件，初始化应用并启动。
• assets：存放资源文件，如图片、字体等。
• .pubspec.yaml：用于描述项目依赖的文件。

窗口与页面

在 Flutter 中，应用的界面是通过构建一系列的 Widgets（组件）来形成的。每个 Widget 都是一个树状结构，通过层层嵌套构建复杂的界面布局。应用的根 Widget 通常是 Scaffold，它包含了标题栏、底部导航栏等组件。

import 'package:flutter/material.dart';

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

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

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

构建第一款应用

打开Flutter工具

为了快速启动，我们推荐使用 Flutter 的官方开发者工具——Android Studio 或 Visual Studio Code 配合 Flutter 插件。按照设置向导完成环境搭建后，即可开始构建我们的第一个应用。

创建新项目

在 Android Studio 或 Visual Studio Code 中，选择创建新 Flutter 项目，按照界面提示设置项目路径、应用名称、项目类型等，点击完成即可创建一个空白项目。

编写代码

在创建的项目中，打开 lib/main.dart 文件，把代码替换为以下内容：

import 'package:flutter/material.dart';

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

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

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

保存并运行应用，你将在模拟器或真机上看到一个简单的窗口，标题为“Hello, Flutter!”。

条件渲染

在 Flutter 中，使用 if 表达式或 Switch 语句来实现条件渲染。

class ConditionalWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return if (condition)
      Text('Yes, Condition is True')
    else
      Text('No, Condition is False');
  }
}

列表渲染

对于列表渲染，Flutter 提供了 ListView 或 Column 等组件，通过 for 循环来生成列表项。

List<String> items = ['Apple', 'Banana', 'Cherry'];

class ListExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: items.map((item) {
        return ListTile(title: Text(item));
      }).toList(),
    );
  }
}

过渡动画

使用 Animation 类来创建动画效果，比如淡入淡出、滑动等。

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

class AnimatedWidget extends StatefulWidget {
  @override
  _AnimatedWidgetState createState() => _AnimatedWidgetState();
}

class _AnimatedWidgetState extends State<AnimatedWidget> {
  AnimationController _controller;

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

  @override
  Widget build(BuildContext context) {
    return Center(
      child: AnimatedBuilder(
        animation: _controller,
        builder: (context, child) {
          return Container(
            color: Colors.red.withOpacity(_controller.value),
            width: 100,
            height: 100,
          );
        },
      ),
    );
  }

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

状态管理

在构建复杂应用时，状态管理变得尤为重要。Flutter 提供了多种状态管理方案，如 Provider、Bloc、Reactive Flutter 等，选择合适的方案取决于应用的复杂度和团队习惯。

使用 Provider

Provider 是一个流行的状态管理库，它使用发布者模式来管理应用状态。

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1

在 pubspec.yaml 文件中添加依赖后，导入库并创建应用的提供商：

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

class MyProvider extends ChangeNotifier {
  bool _isDark = false;

  void toggleDarkMode() {
    _isDark = !_isDark;
    notifyListeners();
  }

  bool get isDarkMode => _isDark;
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MyProvider()),
      ],
      child: MyApp(),
    ),
  );
}

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

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<MyProvider>(context);
    return Scaffold(
      body: Center(child: Text(provider.isDarkMode ? 'Dark Mode' : 'Light Mode')),
      child: ElevatedButton(
        onPressed: provider.toggleDarkMode,
        child: Text('Toggle'),
      ),
    );
  }
}

实践与案例

为了加深理解，我们来实现一个简单的待办事项应用。这个应用将包含添加、删除和完成待办事项的功能。

dependencies:
  flutter:
    sdk: flutter
  provider: ^6.0.1

在 main.dart 文件中，首先创建一个待办事项状态管理类：

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

class TodoItem {
  final String title;
  bool isDone;

  TodoItem({required this.title, this.isDone = false});
}

class TodoProvider extends ChangeNotifier {
  List<TodoItem> _todos = [];

  void addTodo(String title) {
    _todos.add(TodoItem(title: title));
    notifyListeners();
  }

  void deleteTodo(int index) {
    _todos.removeAt(index);
    notifyListeners();
  }

  void toggleTodo(int index) {
    _todos[index].isDone = !_todos[index].isDone;
    notifyListeners();
  }

  List<TodoItem> get todos => _todos;
}

接下来，创建应用的界面：

class TodoItemWidget extends StatelessWidget {
  final TodoItem item;
  final Function(index) deleteTodo;
  final Function(index) toggleTodo;

  TodoItemWidget({required this.item, required this.deleteTodo, required this.toggleTodo});

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Row(
        children: [
          Checkbox(
            value: item.isDone,
            onChanged: toggleTodo,
            label: Text(item.title),
          ),
          IconButton(
            icon: Icon(Icons.delete),
            onPressed: deleteTodo,
          ),
        ],
      ),
    );
  }
}

class TodoList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final provider = Provider.of<TodoProvider>(context);
    return ListView.builder(
      itemCount: provider.todos.length,
      itemBuilder: (context, index) {
        return TodoItemWidget(
          item: provider.todos[index],
          deleteTodo: () => provider.deleteTodo(index),
          toggleTodo: (index) => provider.toggleTodo(index),
        );
      },
    );
  }
}

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => TodoProvider()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Todo List',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Todo List'),
        ),
        body: TodoList(),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            final provider = Provider.of<TodoProvider>(context);
            provider.addTodo('New Todo');
          },
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

完成以上步骤后，你将拥有一个具备基本功能的待办事项应用。通过这个案例，不仅可以巩固 Flutter 和 Provider 的使用，还能学习如何构建实用的用户界面。

至此，你已经系统地学习了 Flutter 从基础概念到构建应用的全过程。通过实践和案例，你应该能够构建出更加复杂的跨平台应用。继续探索 Flutter 的更多功能和库，将有助于你成为更熟练的开发人员。