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 ) ), ), ); } }

推荐阅读

• 

  洛阳牡丹怎么养，洛阳牡丹花如何养
• 

  虎头茉莉怎么施肥 虎头茉莉怎么养
• 

  战歌竞技场亡灵战阵容怎么组 战歌竞技场亡灵战阵容分享
• 

  小学毕业寄语50句话 小学毕业寄语50句
• 

  脂肪型肥胖的危害有哪些 引起肥胖的三类脂肪
• 

  光火神殿为什么在秩序之战闭门不出？
• 

  我最近经常吃辣条，会口臭，是辣条造成的吗？
• 

  胡忠信名字打分102分
• 

  翠玉是玉还是翡翠 翠玉属于翡翠吗
• 

  精油皂和洗面奶哪个洗脸好
• 

  吃菠萝蜜会发胖吗
• 

  gmc是什么车gmc是哪个公司的车
• 

  淘宝不认tm商标 淘宝如何申请商标入驻，入驻淘宝品牌库显示近似商标
• 

  空调外机没有水滴下来怎么回事 美的空调制冷室外机不滴水怎么回事
• 

  抖音极速版怎么合拍不了 抖音极速版怎么合拍
• 

  信息流推荐系统智能交付解决方案探索
• 

  佳能废墨垫清零教程视频下载安装
• 

  到山西做客，主家很少用青花汾招待，这4款好酒才是宴请的首选
• 

  欧洲的牧场和食品库之称的国家是
• 

  520和521代表什么意思 520和521区别是什么

• 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）