1 Flutter目录结构介绍
1.1 创建项目
flutter create flutterdemo
1.2 目录结构
1.3 结构说明
1、android、ios、linux、macos、web、windows文件夹：都是对应平台相关代码
2、lib文件夹：flutter相关代码，我们编写的代码就在这个文件夹
3、test文件夹：用于存放测试代码
4、pubspec.yaml：配置文件，一般存放一些第三方库的依赖。
5、analysis_options.yaml文件：分析dart语法的文件，老项目升级成新项目有警告信息的话可以删掉 此文件
2 Flutter入口文件、入口方法
2.1 说明
每一个flutter项目的lib目录里面都有一个main.dart这个文件就是flutter的入口文件
main.dart里面的
2.2 示例
void main(){
runApp(MyApp());
}
//也可以简写
void main()=>runApp(MyApp());其中的main方法是dart的入口方法。
runApp方法是flutter的入口方法。
MyApp是自定义的一个组件
3 Flutter第一个Demo Center组件的使用
demo1
//代码块
import 'package:flutter/material.dart';
void main() {
runApp(const Center(
child: Text(
"我是一个文本",
textDirection: TextDirection.ltr,
),
));
}使用可选参数添加相关属性信息
import 'package:flutter/material.dart';
void main() {
runApp(const Center(
child: Text(
"我是一个文本",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
// color: Colors.yellow,
color: Color.fromRGBO(244, 233, 121, 0.5),
),
),
));
}demo3
import 'package:flutter/material.dart';
//MaterialApp 和 Scaffold两个组件装饰App
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("你好Flutter")),
body: const Center(
child: Text(
"我是一个文本",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
// color: Colors.yellow,
color: Color.fromRGBO(244, 233, 121, 0.5),
),
),
),
),
));
}demo4
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
//MaterialApp 和 Scaffold两个组件装饰App
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("你好Flutter")),
body:const HomeWidget(),
),
));
}
//抽离组件
class HomeWidget extends StatelessWidget{
const HomeWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
"我是一个文本",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
// color: Colors.yellow,
color: Color.fromRGBO(244, 233, 121, 0.5),
),
),
);
}
}4 MaterialApp 和 Scaffold两个组件装饰App
4.1 MaterialApp
MaterialApp是一个方便的Widget，它封装了应用程序实现Material Design所需要的一些Widget。一 般作为顶层widget使用。
常用的属性：
home (主页)
title (标题)
color (颜色)
theme (主题)
routes (路由)
...
4.2 Scaffold
Scaffold是Material Design布局结构的基本实现。此类提供了用于显示drawer、snackbar和底部sheet 的API。
Scaffold 有下面几个主要属性：
appBar - 显示在界面顶部的一个 AppBar。
body - 当前界面所显示的主要内容 Widget。
drawer - 抽屉菜单控件。
5 Flutter把内容单独抽离成一个组件
在Flutter中自定义组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期我们都继承StatelessWidget。后期给大家讲StatefulWidget的使用。
StatelessWidget 是无状态组件，状态不可变的widget
StatefulWidget 是有状态组件，持有的状态可能在widget生命周期改变
示例
import 'package:flutter/material.dart';
import 'package:flutter/material.dart';
//MaterialApp 和 Scaffold两个组件装饰App
void main() {
runApp(MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("你好Flutter")),
body:const HomeWidget(),
),
));
}
class HomeWidget extends StatelessWidget{
const HomeWidget({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const Center(
child: Text(
"我是一个文本",
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
// color: Colors.yellow,
color: Color.fromRGBO(244, 233, 121, 0.5),
),
),
);
}
}
