1.项目的创建一个flutter项目

进入Android Studio直接创建new flutter Project（如若创建时过慢也可以直接在项目目录打开命令指示符输入flutter create 项目名即可快速创建）

2.Android Studio与夜神模拟器连接

https://blog.csdn.net/weixin_42433094/article/details/113399762

3.flutter简单了解

引入import ‘package:flutter/material.dart’; flutter标准UI包
启动项目可用控制台输入flutter run启动 p显示网格(可看对齐线) o切换模式（ios和安卓切换） q关闭

4.flutter基础讲解

基础界面设置的了解

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget{
  5.    @override
  6.    Widget build(BuildContext context){
  7.      return MaterialApp(
  8.        title: "后台标题",
  9.        home: Scaffold(
  10.          appBar: AppBar(
  11.            title: Text("内部标题")
  12.          ),
  13.          body: Center(
  14.            child: Text("这是一个内部的文本，主要是内部的东西，",
  15.               textAlign: TextAlign.left,//对齐方式
  16.               maxLines: 1,  //最多显示行  比下面那个优先级高
  17.               overflow: TextOverflow.ellipsis,//超出一行省略号代替
  18.               style: TextStyle( //文本字体设置
  19.                 fontSize: 25.0,//字体大小
  20.                 color: Color.fromARGB(255, 5, 125, 125),//颜色配置
  21.                 decoration: TextDecoration.underline,//下划线
  22.                 decorationStyle: TextDecorationStyle.solid,//线的属性（实线，虚线等等）
  23.               ),
  24.            ),
  25.          ),
  26.        ),
  27.      );
  28.    }
  29.  }

Container容器的基础（类似于div）

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget{
  5.    @override
  6.    Widget build(BuildContext context){
  7.      return MaterialApp(
  8.        title: "后台标题",
  9.        home: Scaffold(
  10.          body: Center(
  11.           child: Container(     //类似于css的div
  12.             child: new Text("Hello wwt",style: TextStyle(fontSize: 40.0)),
  13.             alignment: Alignment.topLeft ,//Container下的子内容对齐方式
  14.             width: 500.0,  //Container块的宽
  15.             height: 400.0,//Container块的高
  16.             //color: Colors.lightBlue,//Container背景颜色
  17.             padding: const EdgeInsets.fromLTRB(10.0,30.0,0,0),//Container容器对里面的内边距
  18.             margin: const EdgeInsets.all(20.0),//Container容器对里面的外边距
  19.             decoration: new BoxDecoration(  //Container容器装饰
  20.               gradient: const LinearGradient(//背景渐变色
  21.                 colors: [Colors.lightBlue,Colors.lightGreenAccent,Colors.pinkAccent,Colors.white12]//可以一直叠加
  22.               ),
  23.               border: Border.all(width: 5.0,color: Colors.red)//Container容器的边框
  24.             ),
  25.           ),
  26.          ),
  27.        ),
  28.      );
  29.    }
  30.  }

图片的插入Image

微信截图_20210315104238.png

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget{
  5.    @override
  6.    Widget build(BuildContext context){
  7.      return MaterialApp(
  8.        title: "后台标题",
  9.        home: Scaffold(
  10.          body: Center(
  11.           child: Container(     //类似于css的div
  12.            child: new Image.network(//网上图片
  13.              "https://i1.hdslb.com/bfs/face/5e78623de1267feccac3bf0e20303e00e91694ca.jpg@140w_140h_1c.webp",
  14.              //图片的设置;contain拉伸但不影响图片比例，fill铺满Container容器影响比例，fitWidth横向填充拉伸不影响比例但不够会被裁切，fitHeight与前面相反
  15.              //fit: BoxFit.fitHeight,
  16.              //color: Colors.lightBlueAccent,//图片颜色
  17.              //colorBlendMode: BlendMode.modulate,//颜色模式
  18.              repeat: ImageRepeat.repeat,//相对于Container容器铺满方式，
  19.            ),
  20.             width: 300.0,
  21.             height: 200.0,
  22.             color: Colors.pinkAccent,
  23.           ),
  24.          ),
  25.        ),
  26.      );
  27.    }
  28.  }

加载项目源文件的资源图片

image.png

  1. child: new Image.asset('images/1.jpg'),

ListView列表视图

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget{
  5.    @override
  6.    Widget build(BuildContext context){
  7.      return MaterialApp(
  8.        title: "后台标题",
  9.        home: Scaffold(
  10.          appBar: new AppBar(title: new Text("ListView图标组件"),),
  11.          body: new ListView(    //列表视图
  12.        /*    children: <Widget>[  //列表元素，文本
  13.              new ListTile(
  14.                leading: new Icon(Icons.perm_camera_mic),  //小标签
  15.                title: new Text("画虎刻鹄"),               //文本
  16.              ),new ListTile(
  17.                leading: new Icon(Icons.repeat),
  18.                title: new Text("有勇有谋"),
  19.              ),
  20.            ],*/
  21.            children: <Widget>[      //列表插入图片
  22.              new Image.asset("images/1.jpg"),
  23.              new Image.network("https://i1.hdslb.com/bfs/face/5e78623de1267feccac3bf0e20303e00e91694ca.jpg@140w_140h_1c.webp"),
  24.              new Image.asset("images/1.jpg"),
  25.              new Image.network("https://i1.hdslb.com/bfs/face/5e78623de1267feccac3bf0e20303e00e91694ca.jpg@140w_140h_1c.webp"),
  26.            ],
  27.          ),
  28.        ),
  29.      );
  30.    }
  31.  }

ListView横向列表+分组件减少单体嵌套过多

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget{
  5.    @override
  6.    Widget build(BuildContext context){
  7.      return MaterialApp(
  8.        title: "后台标题",
  9.        home: Scaffold(
  10.          appBar: new AppBar(title: new Text("ListView图标组件"),),
  11.          body:Center(
  12.            child: Container(
  13.              height: 200.0,
  14.              child: MyList(), //分模块写
  15.            ),
  16.          ),
  17.        ),
  18.      );
  19.    }
  20.  }
  21. class MyList extends StatelessWidget{
  22.    @override
  23.    Widget build(BuildContext context){
  24.      return ListView(
  25.        scrollDirection: Axis.horizontal,//列表横向设置
  26.        children: <Widget>[
  27.          new Container(
  28.            width: 180.0,
  29.            color: Colors.indigoAccent,
  30.          ),new Container(
  31.            width: 180.0,
  32.            color: Colors.pinkAccent,
  33.          ),new Container(
  34.            width: 180.0,
  35.            color: Colors.deepOrangeAccent,
  36.          ),
  37.        ],
  38.      );
  39.    }
  40. }

ListView纵向动态列表+List数组+动态列表构建（写完后需要重新运行加载数据缓存）

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp(
  4.   items:new List<String>.generate(1000,(i)=>"列表第 $i")//自己编辑一个list
  5. ));
  6.  class MyApp extends StatelessWidget{
  7.    final List<String> items;          //声明一个常量
  8.   //固定写法        传递的参数             无名无参的父类
  9.    MyApp({Key key,@required this.items}):super(key: key);
  11.    @override
  12.    Widget build(BuildContext context){
  13.      return MaterialApp(
  14.        title: "后台标题",
  15.        home: Scaffold(
  16.          appBar: new AppBar(title: new Text("ListView图标组件"),),
  17.          body:new ListView.builder( //构建动态列表
  18.            itemCount: items.length, //生成条数
  19.            itemBuilder: (context,index){  //遍历list
  20.              return new ListTile(
  21.                title: new Text("${items[index]}"),
  22.              );
  23.            },
  24.          ),
  25.        ),
  26.      );
  27.    }
  28.  }

GridView网格列表(图片列表)

写法一
  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget {
  6.    @override
  7.    Widget build(BuildContext context) {
  8.      return MaterialApp(
  9.        title: "后台标题",
  10.        home: Scaffold(
  11.          appBar: new AppBar(title: new Text("ListView图标组件"),),
  12.          body: GridView.count(    //网格
  13.            padding: const EdgeInsets.all(20.0),//距离外部容器的边距
  14.            crossAxisCount: 3,//设置三行
  15.            crossAxisSpacing: 10.0,//每个网格的边距
  16.            children: <Widget>[
  17.              const Text("我是a"),
  18.              const Text("我是b"),
  19.              const Text("我是c"),
  20.              const Text("我是d"),
  21.              const Text("我是e"),
  22.              const Text("我是f"),
  23.            ],
  24.          ),
  25.        ),
  26.      );
  27.    }
  28.  }

写法二

fit: BoxFit.cover填满容器裁切,图片的属性，fit可以完美配合容器进行裁切

  1. import 'package:flutter/material.dart';
  3. void main() => runApp(MyApp());
  4.  class MyApp extends StatelessWidget {
  6.    @override
  7.    Widget build(BuildContext context) {
  8.      return MaterialApp(
  9.        title: "后台标题",
  10.        home: Scaffold(
  11.          appBar: new AppBar(title: new Text("ListView图标组件"),),
  12.          body: GridView(
  13.            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
  14.              crossAxisCount: 3,//一行三个
  15.              mainAxisSpacing: 2.0,//上下两行的边距
  16.              crossAxisSpacing: 2.0,//左右边距
  17.              childAspectRatio: 0.7,//图片比例 宽高比
  18.            ),
  19.            children: <Widget>[
  20.              new Image.network("http://img5.mtime.cn/mt/2021/03/04/101410.25280244_1280X720X2.jpg",fit: BoxFit.cover),//fit: BoxFit.cover填满容器裁切
  21.              new Image.network("http://img5.mtime.cn/mt/2021/01/06/094232.18209247_1280X720X2.jpg",fit: BoxFit.cover),
  22.              new Image.network("http://img5.mtime.cn/mt/2021/03/04/103317.70446282_1280X720X2.jpg",fit: BoxFit.cover),
  23.              new Image.network("http://img5.mtime.cn/mt/2021/03/11/094158.30870791_1280X720X2.jpg",fit: BoxFit.cover),
  24.              new Image.network("http://img5.mtime.cn/mt/2021/02/04/143001.40483517_1280X720X2.jpg",fit: BoxFit.cover),
  25.              new Image.network("http://img5.mtime.cn/mt/2021/03/09/200645.34627873_1280X720X2.jpg",fit: BoxFit.cover),
  26.            ],
  27.          ),
  28.        ),
  29.      );
  30.    }
  31.  }