第一个Flutter应用程序-Flutter零基础入门教程

当前位置:　首页>> 技术小册>> Flutter零基础入门教程

有了第一章节Flutter 开发环境的搭建，就可以开始创建你的第一个Flutter应用程序。

--------------------------------

**1、创建第一个Flutter应用程序**

打开Android Studio或VS Code，创建一个新的Flutter项目。如果你是第一次使用Flutter，可以先创建一个简单的计数器应用程序。下面是计数器应用程序的完整代码：

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

int _counter = 0;

void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      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:',
              ),
              Text(
                '$_counter',
                style: Theme.of(context).textTheme.headline4,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}
```

在这个示例中，我们创建了一个名为MyApp的Flutter应用程序，它是一个有状态的小部件，用于管理计数器的值。在应用程序的build方法中，我们创建了一个MaterialApp小部件，它提供了应用程序的主题和初始路由。在Scaffold小部件中，我们创建了一个AppBar小部件，显示应用程序的标题，以及一个Column小部件，它包含了两个Text小部件和一个FloatingActionButton小部件。当点击FloatingActionButton小部件时，_incrementCounter方法会被调用，计数器的值会自增1。

在上述代码中，我们使用了许多Flutter框架的基本概念，包括小部件、状态和setState方法等。

**2、Flutter基本概念**

**2.1 小部件**
在Flutter中，所有的用户界面元素都是小部件。小部件是Flutter框架的基本构建块，它可以是一个简单的文本标签，也可以是一个复杂的布局容器。在Flutter中，所有的小部件都是不可变的，这意味着一旦创建，就不能再修改它们的属性。

Flutter提供了许多内置的小部件，包括Text、Image、ListView、Column和Row等。同时，Flutter也支持自定义小部件，开发者可以根据自己的需求创建自己的小部件。

**2.2 状态**
在Flutter中，小部件可以是有状态的或无状态的。有状态的小部件在其生命周期中可以改变其属性值，从而影响用户界面的呈现。例如，在上述计数器应用程序中，MyApp小部件就是有状态的，因为它包含了一个计数器值_counter，并且在用户点击FloatingActionButton时可以改变该值。

**2.3 setState方法**
在Flutter中，有状态的小部件必须使用setState方法来更新其属性值。setState方法会通知Flutter框架，告诉它需要重新构建小部件树，以便更新用户界面。在上述计数器应用程序中，当用户点击FloatingActionButton时，_incrementCounter方法会调用setState方法，使得Flutter框架重新构建小部件树，以便更新计数器的值。

**小结**
本章节的示例代码仅仅是一个非常简单的计数器应用程序，但是它涵盖了Flutter应用程序的许多核心概念，包括小部件、状态和setState方法等。如果你希望深入学习Flutter，请继续阅读后续的章节以便更好地掌握Flutter框架的使用。

Flutter是一款功能强大、易于学习、快速开发的移动应用程序开发框架，它为开发者提供了许多实用工具和内置小部件，使得开发者可以更加轻松地创建出高质量的移动应用程序。

该分类下的相关小册推荐：

深入学习Flutter