一.flutter的目录结构
android :android 平台相关代码
ios：iOS平台相关代码
lib：flutter相关代码，我们主要写的代码就在这个文件夹中
test：用于存放测试代码
pubspec.yaml :配置文件，一般存放一些三方库的依赖
二.程序入口
每个flutter 项目的lib目录里面都有一个main.dart文件就是flutter的入口文件
void main() => runApp( MyTitle());
其中的main方法就是dart的入口方法，runApp方法就是flutter的入口方法，MyTitle是一个自定义组件。
三.导入系统库
输入 fim(flutter import) 回车
import 'package:flutter/material.dart';
四. 定义main方法
import 'package:flutter/material.dart';
void main() => runApp(
//flutter中可以省略new关键字
new Center(child: new Text('你好flutter', textDirection: TextDirection.ltr)));
runApp方法就可以调用组件,在flutter中所有的组件都是类,flutter中可以省略new关键字
五.自定义组件
把组件写在main方法中过于臃肿，抽取成一个自定义组件。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Text(
'你好flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
// color: Color.fromARGB(244, 244, 244, 244),
color: Colors.yellow,
fontSize: 40.0, // flutter 中接受的所有参数都是double值
),
));
}
}
StatelessWidget是一个抽象类代表无状态组件，flutter 中所有和数字相关的都是double类型
六.顶部组件：MaterialApp 和Scaffold 两个组件
class MyContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('标题栏',
style: TextStyle(
color: Colors.yellow,
fontSize: 20.0, // flutter 中接受的所有参数都是double值
))),
body: new MyApp(),
),
theme: ThemeData(primarySwatch: Colors.yellow)//设置主题
);
}
}
MaterialApp：一般作为顶层widget使用，属性有home、theme。
Scaffold：属性有appBar 、body 、sheet
写界面步骤
1.先写一个自定义控件继承StatelessWidget
2.返回MaterialApp组件
- MaterialApp中添加 home、body 、theme 属性
- home中添加appBar 书写标题栏，home中添加内容
