从 TodoList 入门，揭秘 Flutter 世界的神奇面纱

2023-11-01 19:55:21

从 TodoList 入门 Flutter 开发

在过去的几周里，我一直在学习 Flutter，并被它的神奇魅力深深吸引。Flutter 是一个用于构建跨平台移动应用的开源框架，由谷歌开发。它使用 Dart 语言，一种现代且面向对象的编程语言，可以编译成机器代码，并在多个平台上运行。

对于初学者来说，Flutter 有很多吸引人的地方。首先，它具有跨平台的能力，这意味着您可以使用相同的代码库在 iOS 和 Android 上构建应用程序。其次，Flutter 的学习曲线相对较低，即使您没有编程经验，也可以快速上手。第三，Flutter 拥有丰富的组件库，可以帮助您快速构建出美观且功能强大的用户界面。

为了让大家更好地理解 Flutter 的魅力，我决定从一个 TodoList 小例子开始，带领大家入门 Flutter 开发。

创建一个新的 Flutter 项目

首先，您需要创建一个新的 Flutter 项目。您可以使用 Flutter CLI 工具来创建项目。打开终端窗口，输入以下命令：

flutter create my_todo_app

这将创建一个名为 my_todo_app 的新 Flutter 项目。

导入必要的库

在您创建的项目中，您需要导入必要的库。打开 lib/main.dart 文件，并在顶部添加以下代码：

import 'package:flutter/material.dart';

这将导入 Flutter 的核心库。

创建一个新的 Dart 类

接下来，您需要创建一个新的 Dart 类。在 lib/main.dart 文件中，添加以下代码：

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

这将创建一个名为 MyApp 的新 Dart 类，它继承自 StatelessWidget 类。MyApp 类是您的应用程序的主类，它负责创建应用程序的根小部件。

创建一个新的主页

接下来，您需要创建一个新的主页。在 lib/main.dart 文件中，添加以下代码：

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Text('Hello, Flutter!'),
      ),
    );
  }
}

这将创建一个名为 MyHomePage 的新 Dart 类，它继承自 StatefulWidget 类。MyHomePage 类是您应用程序的主页，它负责创建主页的小部件。

运行您的应用程序

现在，您已经创建了您的第一个 Flutter 应用程序。要运行您的应用程序，您需要在终端窗口中输入以下命令：

flutter run

这将编译您的应用程序并将其运行在模拟器或设备上。

TodoList 小例子

现在，让我们来实现一个 TodoList 小例子。在 lib/main.dart 文件中，添加以下代码：

import 'package:flutter/material.dart';

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

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

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> todoList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todoList[index]),
          );
        },
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            todoList.add('New Todo Item');
          });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}