学习必须要从最简单的开始😀
删除lib / main.dart中的所有代码,添加下面最简单的文本显示代码
import 'package:flutter/material.dart';
void main() {
runApp(
new Center(
child: new Text(
'Hello, world!',
textDirection: TextDirection.ltr,
),
),
);
}
简单说一下
- main函数是flutter应用的入口函数。
- runApp函数作用把指定的组建显示到屏幕上,并且布满屏幕。
- 上面的实例使用了两个组件:
Center组件:把子组件的对齐方式居中显示。
Text组件:文本组件,显示一段文本,是flutter最常用的组件之一。
尝试添加Material Design样式,参考下面代码
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Hello World'),
),
),
);
}
}
界面上就会显示出下面样式,后面我们会详细介绍各种组件的使用方法
hello-world-screenshot.png
网友评论