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

推荐阅读

• 

  手把手教你开启小E防火墙
• 

  职场沟通核心思路
• 

  峰回路转的意思及造句
• 

  学而优则仕的意思是什么意思 学而优则仕的意思是什么
• 

  贷款年利率和月利率有什么区别
• 

  科学发现和技术发明的基本过程
• 

  mysql数据怎么重命名 mysql怎么重命名数据库
• 

  基坑淤泥流沙泉眼处理方法
• 

  朋友们有没有好用的桌面整理软件,现在用的这个不太好用？
• 

  通过Appium获取Android app中webview
• 

  如果不用微信共享,怎样能找到对方的位置？
• 

  眼镜tr材质是什么 tr眼镜框是什么材质
• 

  哪里可以买vx小号 全新微信号2元一个
• 

  平台的流程分析,HAZOP分析流程
• 

  你若不伤，岁月无恙
• 

  窝蛋腊肠煲仔饭的做法 怎样做窝蛋腊肠煲仔饭
• 

  双引号怎么打出来 双引号怎么打 电脑键盘
• 

  农产品电商平台 是什么类型 农产品电商平台 是什么，农产品电商平台 是什么意思
• 

  兰花什么品种好
• 

  解读大豆油新国标 大豆油国家标准

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