一、创建Flutter项目
创建flutter新项目，可以通过命令行创建 和 通过开发工具创建
1.1 命令行创建
- Flutter的名称不要包含特殊的字符，另外不可以使用驼峰标识
- 创建完之后使用自己喜欢的开发工具打开即可(Android Studio 或 VS code)
flutter create learn_flutter
1.2 通过开发工具创建
直接通过Android Studio来进行创建，Start a new Flutter project，之后填写相关的信息即可
1.3 默认程序分析
默认项目分析：
- 目录下有一个
lib文件夹，存放编写的Flutter代码； -
main.dart，是Flutter启动的入口文件，里面有main函数；
二、开始Flutter代码
2.1 Hello world
import 'package:flutter/material.dart';
main(){
runApp(Center(child:
Text(
"hello dart",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.blue,
fontSize: 20)
),
),
);
}
我们看到上面的代码，难免心生疑惑：
- Dart程序的入口都是
main函数，而Flutter是Dart编写的，入口也是main函数； - 导入的
Material是做什么用？ - 在main函数中调用了一个
runApp()函数又是干什么呢？
2.2 代码分析
2.2.1 runApp和Widget
1、runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的
- 点到
runApp的源码，可以查看到该函数 - 暂时不分析具体的源码（对于初学者并不友好）
2、Widget
- 学习Flutter一开始就要有基本的认识：Flutter中万物皆Widget
- 在我们iOS或者Android开发中，我们的界面有很多种类的划分：
Application、View Controller、Activity、View、Button等等；但是在Flutter中，前面所说的都是不同的Widget, 甚至是内边距的设置，也是通过Padding的Widget来设置
因此，runApp函数让我们传入的就是一个Widget：
- 我们可以导入Flutter默认已经给我们提供的
Material库，来使用其中的很多内置Widget；
2.2.2 Material设计风格
1、material是什么呢？
- material是Google公司推行的一套
设计风格，或者叫设计语言、设计规范等； - 有非常多的设计规范，比如
颜色、文字的排版、响应动画与过度、填充等等； - Flutter中高度集成了
Material风格的Widget； - 在我们的应用中，我们可以直接使用这些Widget来创建我们的应用（后面会用到很多）；
2.3. 代码改进
2.3.2. 改进界面结构
- 正常的App页面应该有一定的结构，比如通常都会有
导航栏，会有一些背景颜色等
通过下面的代码来实现：
import 'package:flutter/material.dart';
main(){
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text("navigationTitle",
),
),
body: Center(child:
Text(
"hello dart",
textDirection: TextDirection.ltr,
style: TextStyle(
color: Colors.blue,
fontSize: 30
)
),
),
),
)
);
}
上面代码中，是在最外层包裹了MaterialApp
意味着应用都会采用MaterialApp风格，方便我们对应用的设计，并且目前我们使用了其中一个属性：home，应用启动时显示的页面，我们传入了一个Scaffold；
- 什么是Scaffold(
脚手架)？
- Scaffold的作用就是搭建页面的基本结构；(给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；)
-
Scaffold也有一些属性，比如
appBar和body；appBar是用于设计导航栏，传入一个title属性(代码如上)；body是页面的内容部分，传入了已经创建好的Center的Widget；
2.3.3 进阶案例实现
案例1：
实现该图中的界面
main.dart:
import 'package:flutter/material.dart';
import './try/window.dart';
main() => runApp(ZQLunchApp());
class ZQLunchApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ZQHomePage()
);
}
}
window.dart:
import 'package:flutter/material.dart';
class ZQHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("navigationTitle",
),
),
body: ZQContentBody(),
);
}
}
class ZQContentBody extends StatefulWidget{
@override
State<StatefulWidget> createState() {
return ZQContentBodyState();
}
}
class ZQContentBodyState extends State<ZQContentBody>{
var flag = true;
@override
Widget build(BuildContext context) {
return Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Checkbox(
value: flag,
onChanged: (value){
setState(() {
flag = value;
});
}
),
Text(
'同意协议',
style: TextStyle(
fontSize: 20,
),
)
],
),
);
}
}
案例2：
实现一个列表
import 'package:flutter/material.dart';
class ZQHomePage extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("商品列表",
style: TextStyle(
fontSize: 20,
color: Colors.green,
),
),
backgroundColor: Colors.brown,
),
body: ZQHotContent(),
);
}
}
class ZQHotContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10),
child: ListView(
children: [
ProductItem("Apple1", "Macbook Product1", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg'),
ProductItem("Apple2", "Macbook Product2", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg'),
ProductItem("Apple3", "Macbook Product3", 'https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg')
],
),
);
}
}
class ProductItem extends StatelessWidget{
final String title;
final String detail;
final String imageUrl;
ProductItem(this.title, this.detail, this.imageUrl);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all()
),
child: Column(
children: [
Text(
title,
style: TextStyle(fontSize: 24),
),
Text(
title,
style: TextStyle(fontSize: 18),
),
SizedBox(height: 10,),
Image.network(imageUrl),
],
),
);
}
}
上面用到了一些没有听说过的一些Widget，可能不太明白什么意思，不过不用担心，在后面的章节会一一讲述到的。
网友评论