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

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


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

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

  1. import 'package:flutter/material.dart';
  2. void main() {
  3. runApp(MyApp());
  4. }
  5. class MyApp extends StatefulWidget {
  6. @override
  7. _MyAppState createState() => _MyAppState();
  8. }
  9. class _MyAppState extends State<MyApp> {
  10. int _counter = 0;
  11. void _incrementCounter() {
  12. setState(() {
  13. _counter++;
  14. });
  15. }
  16. @override
  17. Widget build(BuildContext context) {
  18. return MaterialApp(
  19. title: 'Flutter Demo',
  20. theme: ThemeData(
  21. primarySwatch: Colors.blue,
  22. ),
  23. home: Scaffold(
  24. appBar: AppBar(
  25. title: Text('Flutter Demo'),
  26. ),
  27. body: Center(
  28. child: Column(
  29. mainAxisAlignment: MainAxisAlignment.center,
  30. children: <Widget>[
  31. Text(
  32. 'You have pushed the button this many times:',
  33. ),
  34. Text(
  35. '$_counter',
  36. style: Theme.of(context).textTheme.headline4,
  37. ),
  38. ],
  39. ),
  40. ),
  41. floatingActionButton: FloatingActionButton(
  42. onPressed: _incrementCounter,
  43. tooltip: 'Increment',
  44. child: Icon(Icons.add),
  45. ),
  46. ),
  47. );
  48. }
  49. }

在这个示例中,我们创建了一个名为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是一款功能强大、易于学习、快速开发的移动应用程序开发框架,它为开发者提供了许多实用工具和内置小部件,使得开发者可以更加轻松地创建出高质量的移动应用程序。


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