学习B站技术胖的flutter基础课程整理的示例，为了平时方便查阅，同时希望能和大家一同进步~

Flutter基础组件

Hello world

import 'package:flutter/material.dart'; // 引入materialUI库
// 主函数(入口函数)
void main() => runApp(MyApp());
// 声明MyApp类
class MyApp extends StatelessWidget {// 继承后要重构build方法@override //覆盖，重新写方法Widget build(BuildContext context) {// 返回一个Material风格的组件return MaterialApp(title: 'Welcome to Flutter',home: Scaffold(//创建一个Bar，并添加文本appBar: AppBar(title: Text('Welcome to------ Flutter'),),// 在主题的中间区域，添加一个hello world的文本body: Center(child: Text('Hello leon'),)),);}
}

Text Widget

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Text widget',home: Scaffold(body: Center(child: Text('Hello Leon,我是赵沐阳，我特别喜欢前端和大数据，并且愿意为此奋斗一生。我希望可以考上西交大/西工大',textAlign: TextAlign.left,maxLines: 1,overflow: TextOverflow.ellipsis,style: TextStyle(fontSize: 25.0,color: Color.fromARGB(255, 255, 150, 150),decoration: TextDecoration.underline,decorationStyle: TextDecorationStyle.solid,),)),),);}
}

Container Widget

Alignment、宽、高、颜色

import 'package:flutter/material.dart'; // 引入materialUI库// 主函数(入口函数)
void main() => runApp(MyApp());// 声明MyApp类
class MyApp extends StatelessWidget {// 继承后要重构build方法@override //覆盖，重新写方法Widget build(BuildContext context) {// 返回一个Material风格的组件return MaterialApp(title: 'Text Widget',home: Scaffold(body: Center(child: Container(child: new Text('Hello Leon',style: TextStyle(fontSize: 40.0),),alignment: Alignment.topCenter,width: 500.0,height: 400.0,color: Colors.lightBlue,))),);}
}

Container widget2

padding、margin、decoration

import 'package:flutter/material.dart'; // 引入materialUI库// 主函数(入口函数)
void main() => runApp(MyApp());// 声明MyApp类
class MyApp extends StatelessWidget {// 继承后要重构build方法@override //覆盖，重新写方法Widget build(BuildContext context) {// 返回一个Material风格的组件return MaterialApp(title: 'Text Widget',home: Scaffold(body: Center(child: Container(child: new Text('Hello Leon',style: TextStyle(fontSize: 40.0),),alignment: Alignment.topLeft,width: 500.0,height: 400.0,// color: Colors.lightBlue,(如果使用了decoration，不要再设置color属性，会冲突)// padding属性是内边距，指的是Container边缘与child内容的距离// padding: const EdgeInsets.all(10.0),padding: const EdgeInsets.fromLTRB(10.0, 30.0, 0.0, 0.0),// margin属性是外边距，指的是container和外部元素的距离margin: const EdgeInsets.all(10.0),// decoration是container的修饰器，是设置背景和边框decoration: new BoxDecoration(gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.greenAccent,Colors.purple]),border: Border.all(width:2.0,color:Colors.red))))),);}
}

Image Widget

fit拉伸和挤压、图片颜色混合、repeat图片重复

import 'package:flutter/material.dart'; // 引入materialUI库// 主函数(入口函数)
void main() => runApp(MyApp());// 声明MyApp类
class MyApp extends StatelessWidget {// 继承后要重构build方法@override //覆盖，重新写方法Widget build(BuildContext context) {// 返回一个Material风格的组件return MaterialApp(title: 'Image Widget',home: Scaffold(body: Center(child: Container(child: new Image.network('https://img.bosszhipin.com/beijin/upload/tmp/20190423/40af1ec03087856b0f6ec5dc719ccb01f4c816c40c4b8f9a43721237ec240794.png?x-oss-process=image/resize,w_120,limit_0',// fit: BoxFit.contain,color: Colors.greenAccent,colorBlendMode: BlendMode.darken,repeat: ImageRepeat.repeatY,),width: 300.0,height: 200.0,color: Colors.lightBlue,),)));}
}

ListView Widget

ListTile(列表瓦片)、图片列表

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'LeonZhao Flutter Demo',home: Scaffold(appBar: new AppBar(title: new Text('ListView Widget')),body: new ListView(children: <Widget>[// ListTile(列表瓦片)// new ListTile(//     leading: new Icon(Icons.access_alarm),//     title: new Text('access_alarm')),// new ListTile(//     leading: new Icon(Icons.accessibility_new_outlined),//     title: new Text('accessibility_new_outlined')),// new ListTile(//     leading: new Icon(Icons.wb_shade_sharp),//     title: new Text('wb_shade_sharp'))// 图片列表new Image.network('https://newimg.jspang.com/Vue3_logo.jpg'),new Image.network('https://newimg.jspang.com/web111111.jpg'),new Image.network('https://newimg.jspang.com/TaroLogo1.jpg'),new Image.network('https://newimg.jspang.com/react_blog_demo.jpg')],),),);}
}

横向列表

scrollDirection

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'LeonZhao Flutter Demo',home: Scaffold(appBar: new AppBar(title: new Text('ListView Widget')),body: Center(child: Container(height: 200.0,child: new ListView(scrollDirection: Axis.horizontal,children: <Widget>[new Container(width: 180.0,color: Colors.redAccent,),new Container(width: 180.0,color: Colors.amber,),new Container(width: 180.0,color: Colors.deepOrange,),new Container(width: 180.0,color: Colors.deepPurpleAccent,),],)),)),);}
}

减少嵌套，代码优化

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'LeonZhao Flutter Demo',home: Scaffold(appBar: new AppBar(title: new Text('ListView Widget')),body: Center(child: Container(height: 200.0, child: MyList()),),),);}
}// 代码优化，将列表组件独立定义成一个类，然后加入到子组件中
class MyList extends StatelessWidget {@overrideWidget build(BuildContext context) {return ListView(scrollDirection: Axis.horizontal,children: <Widget>[new Container(width: 180.0,color: Colors.redAccent,),new Container(width: 180.0,color: Colors.yellowAccent,),new Container(width: 180.0,color: Colors.deepOrange,),new Container(width: 180.0,color: Colors.deepPurpleAccent,),],);}
}

动态列表

ListView.builder()

import 'package:flutter/material.dart';
void main() =>// 在main函数的runApp中调用了MyApp类// 需要在入口组件MyApp中传入一个List,需要先声明一个List// items是传入的参数，声明一个List，要求是String类型的// 调用generate方法来生成这个List，需要传入2个参数，1个是List的长度，1个是需要的内容runApp(MyApp(items: List<String>.generate(1000, (i) => "item $i")));class MyApp extends StatelessWidget {// 参数已经传递了，MyApp这个类就要接收这个参数//- 定义一个变量final List<String> items;/** 构造函数,用于接收外部传入的参数 * Key key 固定写法,需要传入key值* @required 表示这个参数为必须传入* this.items 调用当前类声明的items* :super(key: key) 由于当前继承的是StatelessWidget,需要调用super重新构造*/MyApp({required this.items}) : super();@overrideWidget build(BuildContext context) {return MaterialApp(title: 'beline App',home: Scaffold(appBar: AppBar(title: Text('动态列表')),// 怎样使用这个传递进来的Items呢？// vue中可以通过for循环来遍历数组，实现反复渲染页面结构的目的// flutter提供了ListView.builder()动态构建list的组件来实现数组的遍历body: ListView.builder(itemCount: items.length, //- 要生成的条数itemBuilder: (context, index) { // 要生成的内容 //itemBulider需要两个参数，一个是上下文，一个是下标return ListTile(title: Text('${items[index]}')); }),),);}
}

网格列表

GridView.count

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView widget',home: Scaffold(// GridView网格组件body: GridView.count(padding: const EdgeInsets.all(20.0), //内边距crossAxisSpacing: 10.0, // 网格间的空当，相当于每个网格之间的间距crossAxisCount: 3, // 网格的列数，相当于一行放置的网格数量children: <Widget>[const Text("My name is Leonzhao"),const Text("My book is Muyang"),const Text("我是赵沐阳 "),const Text("我喜欢看电影"),const Text("我喜欢看书"),const Text("I Love Wan"),],),),);}
}

GridView(更加原生的方法)

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView widget',home: Scaffold(// GridView网格组件body: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3,mainAxisSpacing: 2.0, // 每个影片纵向之间的距离crossAxisSpacing: 2.0, // 每个影片横向之间的距离childAspectRatio: 0.7), // 宽高比，宽是高的多少倍// 如果宽是高的2倍，那就写2.0，如果高是宽的2倍，那就写0.5children: <Widget>[new Image.network('http://img5.mtime.cn/mt/2018/10/22/104316.77318635_180X260X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/10/10/112514.30587089_180X260X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/13/093605.61422332_180X260X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/07/092515.55805319_180X260X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/21/090246.16772408_135X190X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/17/162028.94879602_135X190X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/19/165350.52237320_135X190X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/16/115256.24365160_180X260X4.jpg',fit: BoxFit.cover),new Image.network('http://img5.mtime.cn/mt/2018/11/20/141608.71613590_135X190X4.jpg',fit: BoxFit.cover),],)),);}
}

布局Row Widget

非灵活水平布局

// Flutter的row控件就是水平控件
// 它可以让Row里边的子元素进行水平排列// row控件可以分为灵活排列和非灵活排列// 非灵活水平布局，根据Row子元素的大小进行布局
// 如果子元素不足，它会留有空隙，如果子元素超出，它会警告
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('水平方向布局'),),// 可以看到，页面上这三个按钮并没有充满一行，而是出现了空隙// 这就是不灵活横向排列造成的，它根据子元素的大小进行排列body: new Row(children: <Widget>[new RaisedButton(onPressed: () {},color: Colors.redAccent,child: new Text('Red Button')),new RaisedButton(onPressed: () {},color: Colors.orangeAccent,child: new Text('orange Button')),new RaisedButton(onPressed: () {},color: Colors.pinkAccent,child: new Text('pink Button')),],),),);}
}

灵活水平布局

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('水平方向布局'),),// 解决上面空隙的问题，可以使用Expended来解决，也就是灵活布局,在按钮的外边加入Expanded就可以body: new Row(children: <Widget>[Expanded(child: new RaisedButton(onPressed: () {},color: Colors.redAccent,child: new Text('Red Button'))),Expanded(child: new RaisedButton(onPressed: () {},color: Colors.orangeAccent,child: new Text('orange Button'))),Expanded(child: new RaisedButton(onPressed: () {},color: Colors.pinkAccent,child: new Text('pink Button'))),],),),);}
}

灵活与不灵活的混用

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('水平方向布局'),),// 我们有时想让中间的按钮大，而两边的按钮保持真实大小// 就可以使用不灵活与灵活模式进行混用body: new Row(children: <Widget>[new RaisedButton(onPressed: () {},color: Colors.redAccent,child: new Text('Red Button')),Expanded(child: new RaisedButton(onPressed: () {},color: Colors.orangeAccent,child: new Text('orange Button'))),new RaisedButton(onPressed: () {},color: Colors.pinkAccent,child: new Text('pink Button')),],),),);}
}

布局Column Widget

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('垂直方向布局'),),body: Column(// 起初文字是以最长的一段文字剧中对齐的，看起来比较别扭// 使用crossAxisAlignment属性进行对齐crossAxisAlignment: CrossAxisAlignment.center,// 主轴和副轴的辨识// mainAxisAlignment 就是主轴对齐方式// main轴:称为主轴，如果用Column组件，那垂直就是主轴，如果Row组件,那水平就是主轴// cross轴:称为副轴，是和主轴垂直的方向。Row组件，垂直就是副轴，Column组件，水平就是副轴// 现在要把这三段话改成垂直方向居中mainAxisAlignment: MainAxisAlignment.center,// 现在只是垂直方向居中了，要让文字相对于水平方向居中，只需要加入Center组件children: <Widget>[Center(child: Text('I am Leon')),// 现在我们想让中间区域变大，头部区域和底部根据文字所占空间进行显示，使用ExpandedExpanded(child: Center(child: Text('Good good study,Day day up'))),Center(child: Text('Hello,Whati s your name?'))],)),);}
}

Stack层叠布局

import 'package:flutter/material.dart';void main() => runApp(MyApp());// 放入一个图片，图片上写一些字或者放入容器，这时Row和Column是无法完成的
// Stack层叠布局
class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var stack = new Stack(// alignment属性是控制层叠的位置的，在两个内容进行层叠时使用// 它有两个值X轴距离和Y轴距离，值是从0到1的// 都是从上层容器的左上角开始算起来的alignment: const FractionalOffset(0.5, 0.8),children: <Widget>[// CircleAvatar经常用来作头像，里面的radius值可以设置图片的弧度// 放入一个图像，然后把弧度设置成100，形成一个漂亮的圆形new CircleAvatar(backgroundImage: new NetworkImage('https://tse1-mm.cn.bing.net/th/id/R-C.3f7b3aeeb56cc63039f14048a35b60c6?rik=4UYkIGbT9Ix6IA&riu=http%3a%2f%2fimg.mshishang.com%2fpics%2fstar%2fcover%2fd6c99f6b120d8f7fd7ea927459a7710a.jpg&ehk=EykTsfn%2fwa2WZoHvfb6LHJLL7YsqSUWXzEgMv7wdrqs%3d&risl=&pid=ImgRaw'),radius: 100.0),new Container(decoration: new BoxDecoration(color: Colors.lightBlue,),padding: EdgeInsets.all(5.0),child: new Text('Leon Lai,我爱黎明！'),)],);return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('Stack层叠布局'),),body: Center(child: stack,)),);}
}

Positioned,层叠定位组件

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {var stack = new Stack(alignment: const FractionalOffset(0.5, 0.8),children: <Widget>[// 超过两个组件的层叠，要用到Positioned组件，层叠定位组件(类似于CSS中的绝对定位)// Positioned组件的属性// button: 距离层叠组件下边的距离// left: 距离层叠组件左边的距离// top: 距离层叠组件上边的距离// right: 距离层叠组件右边的距离// width: 层叠定位组件的宽度// height: 层叠定位组件的高度new CircleAvatar(backgroundImage: new NetworkImage('https://tse1-mm.cn.bing.net/th/id/R-C.3f7b3aeeb56cc63039f14048a35b60c6?rik=4UYkIGbT9Ix6IA&riu=http%3a%2f%2fimg.mshishang.com%2fpics%2fstar%2fcover%2fd6c99f6b120d8f7fd7ea927459a7710a.jpg&ehk=EykTsfn%2fwa2WZoHvfb6LHJLL7YsqSUWXzEgMv7wdrqs%3d&risl=&pid=ImgRaw'),radius: 100.0),// 我们把文字直接放到Positioned里new Positioned(top: 40.0,left: 80.0,child: new Text('Leon Lai')),new Positioned(bottom: 10.0,right: 90.0,child: new Text('黎明'))],);return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('Stack层叠布局'),),body: Center(child: stack,)),);}
}

卡片布局

import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {// 开发一个类似收货地址的列表，使用卡片布局var card = new Card(child: Column(// 使用一个垂直布局组件Column组件，然后利用ListTile实现内部列表children: <Widget>[ListTile(title: new Text('上海市松江区G60科创走廊',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text('Leonzhao:111111111'),leading: new Icon(Icons.account_box, color: Colors.lightBlue),),// 分割线new Divider(),ListTile(title: new Text('云南省昆明市盘龙区',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text('Leonzhao:111111111'),leading: new Icon(Icons.account_box, color: Colors.lightBlue),),new Divider(),ListTile(title: new Text('哈哈哈哈哈哈哈哈哈',style: TextStyle(fontWeight: FontWeight.w500),),subtitle: new Text('Leonzhao:111111111'),leading: new Icon(Icons.account_box, color: Colors.lightBlue),),new Divider(),],));return MaterialApp(title: 'ListView Wdiget',home: Scaffold(appBar: new AppBar(title: new Text('卡片布局'),),body: Center(child: card)),);}
}

导航

一般页面导航和返回

RaisedButton Navigator.push Navigator.pop

// 导航的使用在任何程序里都至关重要，也是一个程序的灵魂// 一般页面导航和返回// RaisdButton按钮组件// child:可以放入容器，图标，文字。构建多彩的按钮
// onPressed:点击事件的相应，一般会调用Navigator组件// Navigator.push 和 Navigator.pop// Navigator.push 是跳转到下一个页面，它接受两个参数一个是上下文context，另一个是要跳转的函数
// Navigator.pop  是返回到上一个页面，使用时传递一个context上下文参数(注意，你必须有上级页面，也就是上级页面使用了Navigator.push)// 实现一个案例，一个页面上有简单的按钮，写着‘查看商品详情页面’
// 然后点击进入下一个页面，页面有一个按钮，可以直接返回import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: '导航演示1', home: new FirstScreen()));
}class FirstScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('导航页面')),body: Center(child: RaisedButton(child: Text('查看商品详情页面'),onPressed: () {Navigator.push(context,new MaterialPageRoute(builder: (context) => new SecondScreen()));})));}
}class SecondScreen extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('沐阳商品详情页')),body: Center(child: RaisedButton(child: Text('返回'),onPressed: () {Navigator.pop(context);}),));}
}

导航参数的传递与接受

// 页面跳转时参数的传递和接受// 进入一个商品选择列表，当你想选择一个商品的具体信息的时候，
// 就需要传递商品编号，详情页面接收到编号后，显示出不同的内容// 安装Awesome Flutter snippets组件，可以快速生成很多代码片段// 例如输入stlss就会自动生成
// class  extends StatelessWidget {
//   const ({ Key? key }) : super(key: key);//   @override
//   Widget build(BuildContext context) {
//     return Container(//     );
//   }
// }import 'package:flutter/material.dart';// 声明数据结构类// Dart中使用类来抽象一个数据
// 模仿一个商品信息，有商品标题和商品描述// 定义一个Product类，里面有两个字符型变量class Product {final String title; // 商品标题final String description; // 商品描述Product(this.title, this.description);
}// 构建一个商品列表
// 采用动态的构造方法
// 在主方法里传递一个商品列表(List)到自定义的Widget中// 主路口文件，主要是在home属性中，使用了ProductList自定义组件
// 会报错是因为我们缺少这个组件
// ProductList组件传递了一个products参数，也就是商品的列表数据
// 这个数据是用List.generate生成的
// 生成的List原型就是我们刚开始定义的Product这个类(抽象数据)
void main() {runApp(MaterialApp(title: '数据传递案例',home: ProductList(products: List.generate(20, (index) => Product('商品 $index', '这是一个商品详情，编号为：$index')))));
}// 先接受了主方法传递过来的参数
// 接受后用ListView.builder方法，生成了一个根据传递参数数据形成的动态列表
class ProductList extends StatelessWidget {final List<Product> products;ProductList({required this.products}) : super();@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('商品列表')),body: ListView.builder(itemCount: products.length,itemBuilder: (context, index) {return ListTile(title: Text(products[index].title),// 导航参数的传递// 使用Navigator组件，使用路由MaterialPageRoute传递参数onTap: () {Navigator.push(context,MaterialPageRoute(// ProductDetail报错，因为还没有声明这个组件或者这个类builder: (context) =>new ProductDetail(product: products[index])));},);}),);}
}// 声明ProductDetail这个类(组件)，先要接收参数
class ProductDetail extends StatelessWidget {final Product product;ProductDetail({required this.product}) : super();@overrideWidget build(BuildContext context) {return new Scaffold(appBar: AppBar(title: Text('${product.title}')),body: Center(child: Text('${product.description}'),));}
}

页面跳转并返回数据

// 页面跳转后，把返回结果 返回到上一个页面(父页面)
// 场景应用于去子页面选择了一个选项，然后把选择的结果返回给父级页面// 实例场景：进入联系人列表，选择要找的联系人
// 点击后返回，在主页上显示出要找的联系人电话import 'package:flutter/material.dart';void main() {runApp(MaterialApp(title: '页面跳转返回数据',home: FirstPage(),));
}// 首页
class FirstPage extends StatelessWidget {@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('联系人名单')),body: Center(child: RouteButton(),));}
}// 跳转的Button
class RouteButton extends StatelessWidget {@overrideWidget build(BuildContext context) {return RaisedButton(onPressed: () {_navigateToperson(context);},child: Text('查找联系人'),);}// 异步请求和等待 async...await// 实现一个查找联系人的方法，进行跳转// 等待结果回来之后，我们再显示出内容_navigateToperson(BuildContext context) async {// async 启动异步方法final result = await Navigator.push(// 等待context,MaterialPageRoute(builder: (context) => PersonNumber()));// SnackBar 是用户操作后，显示提示信息的控件 类似 toast， 会自动隐藏// SnackBar 是以Scaffold的showSnackBar方法进行显示Scaffold.of(context).showSnackBar(SnackBar(content: Text('$result')));}
}class PersonNumber extends StatelessWidget {// 返回数据的方式特别容易，只需要在返回时带第二个参数就可以了@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text('联系人')),body: Center(child: Column(children: <Widget>[RaisedButton(child: Text('赵沐阳'),onPressed: () {Navigator.pop(context, '赵沐阳:15263512324');}),RaisedButton(child: Text('黎明'),onPressed: () {Navigator.pop(context, '黎明:3432844324324');}),RaisedButton(child: Text('任贤齐'),onPressed: () {Navigator.pop(context, '任贤齐:234324432124');}),],),));}
}

配置项目资源文件

// 配置项目资源文件，需要使用pubspec.yaml文件，在这里声明资源文件// 在项目根目录下新建了一个images文件夹，文件夹下面放了一个图片
// 图片的名称叫做1.jpg,在pubspec.yaml文件里写如下代码声明
// assets:
//    - images/1.jpg// 声明后，就可以直接在项目中引用这个文件了import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget {@overrideWidget build(BuildContext context) {return Container(child: Image.asset('images/1.jpg'),);}
}

一份超级详细的Flutter基础组件练习示例，请查收！相关推荐

  1. Flutter 基础组件之 Text

    终于安装好了 Flutter 的环境,既然入了坑,就一点一点学吧,Flutter 可以说一切皆组件吧,所以要熟练掌握各个基础组件的 API,然后才能在面对复杂需求的时候才能得心应手的将各个组件组合起来 ...

  2. 一份超级详细的Python零基础学习资料（仅此一家，可能会被404抓紧收藏）

    一.学习Python必备技能图谱 二.0基础如何系统学习Python? 一.Python的普及入门 1.1 Python入门学习须知和书本配套学习建议 1.2 Python简史 1.3 Python的 ...

  3. Flutter 基础组件之 Container

    官方简介中,说 Container 组件是一个方便绘制.定位和调整子组件大小的组件. 首先 Container 会在 child 子组件周围填充 padding(包括 decoration 中存在的 ...

  4. 【Flutter -- 基础组件】Flutter 导航栏

    文章目录 1. TabBar 1.1 代码 1.2 效果图 2. BottomNavigationBar 2.1 构建底部标签 2.2 创建导航栏 2.3 效果图 1. TabBar Flutter ...

  5. 『数据库』震惊，某博主为吸引眼球拿出压箱底SQL总结，如果你没看那就吃亏了！（超级详细的SQL基础，你还不会的话就别学数据库了）

    这里还有数据库相关的优质文章:快戳我,快戳我

  6. 12 个不可错过的 Vue UI 组件库，请查收

    1. Element UI Element UI 是一套为开发者.设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库.它是一个用于 Web 的 UI 组件库 ,除了 Vue 之外,它还具有Re ...

  7. 请编写程序编写前n个整数的全排列_26道基础算法题（请查收）

    1. 打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身.(例如: 153是一个"水仙花数",因为153 ...

  8. Flutter 基础目录结构介绍、入口自定义widget、等相关组件使用

    提示:此文章为前端学习flutter过程,如有歧义期望各位大大的宝贵意见 学习Dart 基础知识 移步这里 安装flutter环境相关 移步这里 flutter基础组件使用相关 移步这里 文章目录 一 ...

  9. Flutter基础篇（2）-- 老司机用一篇博客带你快速熟悉Dart语法

    版权声明:本文为博主原创文章,未经博主允许不得转载.https://www.jianshu.com/p/3d927a7bf020 转载请标明出处: https://www.jianshu.com/p/ ...

最新文章

  1. MIPS（loongson）linux 中添加系统调用
  2. CentOS虚拟机克隆后网卡配置问题
  3. ios中amplify配置configure_Nginx源码编译安装及配置文件初步学习
  4. 向极限挑战：算术编码 (转)
  5. python超市买苹果_官网购买的iPhone12pro还没发货？试着用Python快速入手
  6. Silverlight+WCF 新手实例 象棋 介绍(一)
  7. base——JRE和JDK的区别【转】
  8. The Importance of Money in Life
  9. 单例模式懒汉Java_java 单例模式（懒汉式与饿汉式）
  10. MyBatis源码阅读(一) --- 源码阅读环境搭建
  11. 报价管理：用VBA开发灵活的报价系统
  12. 什么是网络操作系统？网络操作系统具有那些基本功能？
  13. [bzoj1001]狼抓兔子 最小割
  14. [NOIP 2009] 细胞分裂
  15. PPT使用技巧 一 更改幻灯片版式
  16. 【爱思考】CISP证书有效期是几年，到期后怎么办
  17. python 如何添加国内源_pip和conda添加国内清华镜像源(亲测有效)
  18. Linux下安装google浏览器
  19. 人工生命全景图：如何创造出超越人工智能的生命系统
  20. python中英文字频率_python实现统计文本中单词出现的频率详解

热门文章

  1. mac系统U盘装机 一个被系统坑过的路人
  2. python运行非常慢的解决-python 处理大数据程序运行的越来越慢的问题
  3. php 获间微妙时间戳,php microtime获取浮点的时间戳
  4. 之前做的一个关于支付安全的ppt，内容比较简单，分享给有需要的朋友。
  5. 截图识别文字有哪些方法？这个方法看一下
  6. oracle认证方式分为操作系统认证和…
  7. 《思科绿色数据中心建设与管理》——1.6 绿色倡导者
  8. 用TC Games玩绝地求生：刺激战场1秒极速启动，让你吃鸡快人一步
  9. 【Oracle 数据库】奶妈式教程day06 交叉连接
  10. Linux查看磁盘性能