1.main()和runApp()

• lib/main.dart—入口文件

void main(){ runApp(MyApp()) } //简写 void main（）=>runApp(MyApp())

• main 方法是dart的入口方法 runApp方法是flutter的入口方法 MyApp是自定义的一个组件(flutter中所有的组件都是类)

2.material.dart

• 在main.dart文件引入的快捷方式输入 fim回车import ‘package:flutter/material.dart’;
• 使用flutter必须引入该文件
• Material是一种移动端和网页端通用的视觉设计语言， Flutter 提供了丰富的 Material 风格的 widgets。

3.组件 【flutter学习(1)】
文章图片

• dart中写类的时候 ，可以省略new 关键词

import 'package:flutter/material.dart'; void main(){ runApp(new Center( child: new Text( '你好flutter', textDirection:TextDirection.ltr//文本对齐方式从左向右对齐 ) )); }

• runApp方法中传入一个类,mac电脑按住command然后单击类名可以进入到对应类的底层代码
  
  文章图片
  
  可以看到Center类有一个child参数，这个参数代表它的内容
  -Text类
  
  文章图片
  

4.把flutter内容单独抽离成一个组件

• flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
  前期都继承自StatelessWidget
• StatelessWidget 是无状态组件,状态不可变的widget
• StatefulWidget 是有状态组件,持有的状态可能在widget生命周期改变

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); }/* 把flutter内容单独抽离成一个组件 flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期都继承自StatelessWidget StatelessWidget 是无状态组件,状态不可变的widget StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变 */ class MyApp extends StatelessWidget { @override // build 返回一个Widget 一个类就是widget Widget build(BuildContext context) { return Center( child:Text( '你好flutter222', textDirection:TextDirection.ltr//文本对齐方式从左向右对齐 ) ); }}

5.改变文字颜色
文章图片


文章图片

class MyApp extends StatelessWidget { @override // build 返回一个Widget 一个类就是widget Widget build(BuildContext context) { return Center( child:Text( '你好flutter222', textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐 style: TextStyle( fontSize:40.0,//dart中的数组都是double类型,所以必须加.0 color: Colors.red, // color:Color.fromRGBO(244, 233, 121, 0.5) ), ) ); }}

6.MaterialApp 和Sacffold
文章图片

• MaterialApp许多 Material Design 的 widget 需要在 MaterialApp 中才能显现正常.一般作为顶层的widget使用

• MaterialApp:常用属性 home:主页, title:标题 color:颜色, theme:主题， routes:路由

  
  
• Scaffold 是 Material Design页面布局的基本实现主要属性有:
  • appBar–显示在界面顶部的一个AppBar
  • body–当前界面所显示的主要内容
  • drawer – 抽屉菜单控件

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); }/* 把flutter内容单独抽离成一个组件 flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期都继承自StatelessWidget StatelessWidget 是无状态组件,状态不可变的widget StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变 */ class MyApp extends StatelessWidget { @override // build 返回一个Widget 一个类就是widget Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'Flutter demo' ), ), body: HomeContent(), ), // theme: ThemeData( //primarySwatch:Colors.yellow // ), ); }}class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child:Text( '你好flutter222', textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐 style: TextStyle( fontSize:40.0,//dart中的数组都是double类型,所以必须加.0 color: Colors.red, // color:Color.fromRGBO(244, 233, 121, 0.5) ), ) ); }}

7.Container组件

• Container组件是一个容器组件相当于div元素
  
  文章图片
  
  
  文章图片
  
  官网

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); }/* 把flutter内容单独抽离成一个组件 flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期都继承自StatelessWidget StatelessWidget 是无状态组件,状态不可变的widget StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变 */ class MyApp extends StatelessWidget { @override // build 返回一个Widget 一个类就是widget Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'Flutter demo' ), ), body: HomeContent(), ), // theme: ThemeData( //primarySwatch:Colors.yellow // ), ); }}class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child:Container( child: Text( '这是一个Container组件' ), height: 200.0, width: 200.0, decoration: BoxDecoration( // 设置背景色 color: Colors.yellow, border: Border.all( color: Colors.blue, width:2.0 ) ), ) ); }}

8.Text组件
文章图片


文章图片

官网

文章图片

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); }/* 把flutter内容单独抽离成一个组件 flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget 前期都继承自StatelessWidget StatelessWidget 是无状态组件,状态不可变的widget StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变 */ class MyApp extends StatelessWidget { @override // build 返回一个Widget 一个类就是widget Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'Flutter demo' ), ), body: HomeContent(), ), // theme: ThemeData( //primarySwatch:Colors.yellow // ), ); }}class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child:Container( child: Text( '这是一个Container组件这是一个Container组件这是一个Container组件这是一个Container组件', textAlign: TextAlign.left, overflow:TextOverflow.ellipsis, maxLines: 2,//文本的显示行数 // textScaleFactor: 2,//文本放大的倍数 style: TextStyle( fontSize: 18.0,//文字的字体大小 fontWeight:FontWeight.bold,//字体是否加粗 ), ), height: 200.0, width: 200.0, decoration: BoxDecoration( // 设置背景色 color: Colors.yellow, border: Border.all( color: Colors.blue, width:2.0 ), borderRadius: BorderRadius.all(//设置圆角 Radius.circular(8), ), ), // padding: EdgeInsets.all(9.0),//4个方向 padding: EdgeInsets.fromLTRB(20, 10, 10, 10),//4个方向 alignment: Alignment.bottomRight,//配置container组件内部元素的位置) ); }}

9.Image组件

• Image.asset， 本地图片
• Image.network 远程图片
  
  文章图片
  
  
  文章图片
  
  官网
  
  文章图片
  
• 引入外网图片

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'flutter APP' ), ), body: HomeContent(), ), ); } } class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child: Container( child: Image.network( 'https://..............', alignment:Alignment.topLeft,//图片位置对齐方式 // color: Colors.blue,//设置图片的背景色 一般和colorBlendMode配合使用 // colorBlendMode: BlendMode.screen, // fit:BoxFit.fill ,//全图显示，图片会被拉伸，并充分父容器 // fit:BoxFit.contain ,//全图显示，显示原比例，可能会有空隙 // fit:BoxFit.cover ,//用的多，显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形） repeat: ImageRepeat.noRepeat,//图片是否平铺), width:300, height:300, decoration:BoxDecoration( color: Colors.blue, ) ), ); } }

10.圆角图片
文章图片

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'flutter APP' ), ), body: HomeContent(), ), ); } } class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child: Container( width:300, height:300, decoration:BoxDecoration( color: Colors.blue, // borderRadius: BorderRadius.all(//1.实现圆角 //Radius.circular(150), // ) borderRadius: BorderRadius.circular(150),//2.也可以实现圆角 image: DecorationImage( image: NetworkImage('xxxxxxx'), fit: BoxFit.cover ) ) ), ); } }

• ClipOval

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'flutter APP' ), ), body: HomeContent(), ), ); } } class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child: Container( child: ClipOval(//不管是什么样的图片ClipOval都会根据图片大小处理成圆形或者椭圆形图片 child:Image.network( 'https://epdc-yushan.elinkservice.cn/files-pro/20200521/ae8757973df34aca8979d8da6202a073.jpg', width: 100, height: 100, fit: BoxFit.cover, ), ), ), ); } }

11.本地图片的引入
文章图片


文章图片

• 配置图片
  
  文章图片
  
• 引入

import 'package:flutter/material.dart'; void main(){ runApp(MyApp()); } class MyApp extends StatelessWidget{ @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text( 'flutter APP' ), ), body: HomeContent(), ), ); } } class HomeContent extends StatelessWidget{ @override Widget build(BuildContext context) { return Center( child: Container( child: Image.asset( 'images/ava.png', //fit: BoxFit.cover, ), width: 300.0, height: 300.0, decoration: BoxDecoration( border:Border.all( color: Colors.red, width: 2.0 ) ), ), ); } }

推荐阅读

• 

  北控水务为什么不涨 北控水务到底好不好
• 

  牵组词语 汉字牵组词语
• 

  月季花扦插的最佳时间 月季花扦插的最佳时间现在可以插吗?
• 

  2023重庆医科大学研究生成绩复查申请时间+方式
• 

  n95口罩能防尘吗 n95口罩可以用几次
• 

  摩托罗拉里程碑2刷机
• 

  如果你爱的人总是以怨报德,你会怎么样？
• 

  宝马525多少钱落地 宝马525价格多少钱
• 

  电商铺货是什么意思 电商货架什么意思，货架市场
• 

  胡萝卜怎样吃最有营养啊视频 胡萝卜怎样吃最有营养啊
• 

  巴戟天药材多少钱一斤，巴戟天药店多少钱一斤
• 

  吕锅上的污渍怎么去除啊
• 

  非主流图片唯美霸气 非主流相框素材
• 

  白金膏的功效与作用 皮白金膏的功效与作用?
• 

  虚拟机怎么开网页游戏模式，虚拟机怎样打开网页
• 

  闻鸡起舞的主人公是谁 囊萤映雪的主人公是谁
• 

  口红吃饭的时候怎么办
• 

  宝宝长期咳嗽易得肺炎
• 

  包贝尔大婚柳岩遭闹伴娘 柳岩伴娘事件是什么?
• 

  未婚生子罚款多少2022年 未婚生子罚款多少2022？

• flutter学习|Dart语言Future、async、await异步（十）
• flutter学习|FLUTTER PUB GET失败（八）
• flutter学习|flutter+Dart 类的继承extends with implements （九）
• flutter|Flutter的button的按钮ElevatedButton
• Android开发|Flutter 2.10 正式发布，包含 Windows 平台正式版，快来看看有什么新内容
• 在 Flutter 中更快地加载图像资源！
• Flutter|用flutter封装一个点击菜单工具栏组件【checkBox多选版】
• flutter学习|flutter+Dart类的创建（六）
• 工具|要一统江湖（Google发布Flutter2）