目录
- 从零开始写第一个Flutter app(一)——Hello World
- 从零开始写第一个Flutter app(二)——引用第三方包
- 从零开始写第一个Flutter app(三)——有状态的部件StatefulWidget
- 从零开始写第一个Flutter app(四)——无限滑动的ListView
- 从零开始写第一个Flutter app(五)——ListView添加图标
- 从零开始写第一个Flutter app(六)——添加点击事件交互
- 从零开始写第一个Flutter app(七)——弹出toast
- 从零开始写第一个Flutter app(八)——修改主题颜色
- 从零开始写第一个Flutter app(九)——route跳转新页面
- 从零开始写第一个Flutter app(十)——最终代码
准备
- 环境搭建参考这篇文章Flutter SDK下载安装及环境变量配置
- Flutter和Dart相关插件安装参考这篇文章Android Studio安装Flutter plugin和Dart plugin
- 创建项目参考这篇文章创建和运行第一个Flutter项目
Hello World
根据创建和运行第一个Flutter项目这篇文章创建一个项目,但是这个项目的代码稍多,对于刚入门的人来说稍显复杂,我们今天只要演示一个简单的Hello World,在主界面中间显示Hello World,太难的话会被吓到,打击大家学习的热情
只需要把原来的lib/main.dart文件下的所有内容替换成如下内容
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: const Text('Hello World'),
),
),
);
}
}
然后运行,就可以看到如下结果
代码说明
-
import 'package:flutter/material.dart';语句导入material包,下面代码会用到这个包里面的类
- void main() => runApp(MyApp());语句是程序的主入口,传入一个MyApp对象,这句话是Dart语言简化的写法,还可以写成
void main() {
runApp(MyApp());
}
MyApp()写法其实是省略了new,所以还可以写成如下
void main() {
runApp(new MyApp());
}
- StatelessWidget是Futter中的一种无状态的控件,另一种有状态的控件是StatefulWidget,这一设计理念是参考了React,对于这些东西刚开始不必抠细节太过于深究,一开始先照着敲代码先学会怎么用
- 继承StatelessWidget的类需实现build方法,该方法返回一个Widget控件,这里我们返回一个MaterialApp
- MaterialApp里可以设置title和home主页面
- body我们返回一个Scaffold,在Scaffold中可以设置appBar及body内容
- body中居中显示一个Text,内容为Hello World