flutter笔记

作者: 老P打码 | 来源:发表于2018-12-23 19:07 被阅读0次

flutter笔记汇总
Flutter笔记——帧绘制系列之一(源码学习)
2019-01-08
flutter笔记（六）-----按钮各种Button
flutter 笔记 Hello World
2020-11-09
Flutter环境配置&基本语法&如何使用库
Flutter
0.Flutter学习笔记以及问题记录
Flutter 学习笔记 1

Text

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return MaterialApp(
      title:'pengpengDemo',
      home: Scaffold(
        body: Center(
          child: Text(
            '中间文字测试用',
            textAlign: TextAlign.left,     // 居左对齐
            maxLines: 5,   // 最大显示行数
            overflow: TextOverflow.ellipsis,   // 溢出类型， 截断/省略号
            style: TextStyle( 
              fontSize: 19,     // 字体
              color: Color.fromARGB(255, 255, 0, 0),
              decoration: TextDecoration.underline,    // 装饰/下划线
              decorationColor: Color.fromARGB(255, 0, 255, 0),
              decorationStyle: TextDecorationStyle.solid,   // 下划线样式
            ),
          ),
        ),
      ),
    );
  }
}

Container

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pengpengDemo',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Text(
              '内容text测试',
              style: TextStyle(
                fontSize: 15.0,
              ),
            ),
            alignment: Alignment.topLeft,
            width: 375.0,
            height: 400.0,
            padding: EdgeInsets.fromLTRB(10, 5, 10, 5),    // 设置内边距 左、上、下、右
            margin: EdgeInsets.all(100),    // 设置外边距
            decoration: BoxDecoration( 
              gradient: LinearGradient(
                colors: [Colors.red, Colors.blue, Colors.purple],    // 渐变背景色
              ),
              border: Border.all(width: 2.0, color: Colors.black),   // 边框
            ),
          ),
        ),
      ),
    );
  }
}

Image

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pengpengDemo',
      home: Scaffold(
        body: Center(
          child: Container(
            child: Image.network(
              'https://cdn2.jianshu.io/assets/default_avatar/1-04bbeead395d74921af6a4e8214b4f61.jpg',
              fit: BoxFit.fitHeight,  // 填充模式
              color: Colors.greenAccent,   // 颜色
              colorBlendMode: BlendMode.modulate,     // 混合模式
              repeat: ImageRepeat.repeat,     // image重复模式
            ),
            width: 600,
            height: 600,
            color: Colors.red,
            alignment: Alignment.center,
          )
        ),
      ),
    );
  }
}

ListView

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pengpeng-flutter-demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            'listViewWidget'
          ),
        ),
        body: ListView(
          children: <Widget>[
            ListTile(    // 类似于iOS 的cell
              leading: Icon(Icons.access_time),    // icon
              title: Text(
                'first tile',
              ),
            ),
            Image.network(
              'https://cdn2.jianshu.io/assets/default_avatar/1-04bbeead395d74921af6a4e8214b4f61.jpg'
            )
          ],
        )
      ),
    );
  }
}

ListView + 组件

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pengpeng-flutter-demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('listViewWidget'),
          ),
          body: Center(
            child: Container(
              height: 200.0,
              child: MyList(),
            ),
          )),
    );
  }
}

class MyList extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      scrollDirection: Axis.horizontal, // 横向滚动
      children: <Widget>[
        Container(
          width: 180.0,
          color: Colors.purple,
        ),
        Container(
          width: 180.0,
          color: Colors.yellow,
        ),
        Container(
          width: 180.0,
          color: Colors.orange,
        ),
        Container(
          width: 180.0,
          color: Colors.red,
        ),
      ],
    );
  }
}

动态ListView列表

import 'package:flutter/material.dart';

void main() => runApp(MyApp(
  items: List<String>.generate(1000, (i)=>'Item $i')   
));

class MyApp extends StatelessWidget {

  final List<String> items;
  MyApp({Key key, @required this.items}):super(key:key);   // 构造函数 @required 必须传参数, key为默认参数

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'pengpeng-flutter-demo',
      home: Scaffold(
          appBar: AppBar(
            title: Text('listViewWidget'),
          ),
          body: ListView.builder(
            itemCount: items.length,
            itemBuilder: (context, index){
              return ListTile(
                title: Text('${items[index]}'),
              );
            },
          ),
      )
    );
  }
}

GridView(UICollectionView)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'pengpeng-flutter-demo',
        home: Scaffold(
          appBar: AppBar(
            title: Text('listViewWidget'),
          ),
          body: GridView(
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 3, // 一行个数
              mainAxisSpacing: 2.0, // 主轴间距(此时为y轴)
              crossAxisSpacing: 2.0,  // 副轴间距(此时为x轴)
              childAspectRatio: 1,    // 宽/高比
            ),
            children: <Widget>[
              Image.network(
                'http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg',
              ),
              Image.network(
                'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg',
              ),
              Image.network(
                'http://img.bimg.126.net/photo/V6nNeq8YN2xPBRxTz8w4VA==/5776429472056759812.jpg',
              ),
              Image.network(
                'http://img.daimg.com/uploads/allimg/120319/1-12031921534Y24.jpg',
              ),
              Image.network(
                'http://wx4.sinaimg.cn/large/006nLajtly1fjx1w2g6mej30dw0dwta5.jpg',
              ),
              Image.network(
                'http://wx3.sinaimg.cn/large/00610vQGly1fkwwq76bkaj30dw0dwq51.jpg',
              ),
              Image.network(
                'http://pic11.nipic.com/20101126/3367900_112731025783_2.jpg',
              ),
              Image.network(
                'http://wx3.sinaimg.cn/large/006nLajtly1fjr9yekp70j30dw0dwq4l.jpg',
              ),
            ],
          ),
        ));
  }
}

row - 水平方向布局

import 'package:flutter/material.dart';

void mian() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '水平方向布局',
          ),
        ),
        body: Row( //
          children: <Widget>[
            RaisedButton(  // 不灵活button ，frame根据title变化
              onPressed: (){},
              color: Colors.red,
              child: Text(
                'button-red',
              ),
            ),
            Expanded(child: RaisedButton(  // 灵活button，frame自定调整保证整个屏幕横向填满
              onPressed: (){},
              color: Colors.red,
              child: Text(
                'button-red',
              ),
            ),), 
            RaisedButton(
              onPressed: (){},
              color: Colors.red,
              child: Text(
                'button-red',
              ),
            ),
            RaisedButton(
              onPressed: (){},
              color: Colors.red,
              child: Text(
                'button-red',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Column - 垂直布局

import 'package:flutter/material.dart';

void mian() => runApp(MyApp());

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局',
          ),
        ),
        body: Column( 
          crossAxisAlignment: CrossAxisAlignment.center, // 副轴对齐（此时为x轴）
          mainAxisAlignment: MainAxisAlignment.center,  // 主轴对齐方式
          children: <Widget>[
            Text('first text', style: TextStyle(color: Colors.red),),
            Text('second text'),
            Text('thrid text'),
          ],
        ),
      ),
    );
  }
}

stack层叠布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: FractionalOffset(0.5, 0.5), // 0.0-1.0 设置百分比位置
      children: <Widget>[
        CircleAvatar(
          radius: 100.0, // 弧度
          backgroundImage: NetworkImage(
              'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'),
        ),
        Container(
          decoration: BoxDecoration(
            // 盒子修饰器
            color: Colors.red,
          ),
          padding: EdgeInsets.all(5.0),
          child: Text('PengPeng'),
        )
      ],
    );

    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局',
          ),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

stack层叠布局(绝对定位)

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var stack = Stack(
      alignment: FractionalOffset(0.5, 0.5), // 0.0-1.0 设置百分比位置
      children: <Widget>[
        CircleAvatar(
          radius: 100.0, // 弧度
          backgroundImage: NetworkImage(
              'http://img.bimg.126.net/photo/ZZ5EGyuUCp9hBPk6_s4Ehg==/5727171351132208489.jpg'),
        ),
        Positioned(
          top: 10.0,
          left: 10.0,
          child: Text(
            'PP_first_text'
          ),
        ),
        Positioned(
          bottom: 10.0,
          right: 10.0,
          child: Text(
            'PP_second_text'
          ),
        )
      ],
    );

    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局',
          ),
        ),
        body: Center(
          child: stack,
        ),
      ),
    );
  }
}

Card布局

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    
    var card = Card(
      margin: EdgeInsets.all(20),
      child: Column(
        children: <Widget>[
          ListTile(
            title: Text(
              'PengPeng',
              style: TextStyle(
                fontWeight: FontWeight.w300,
              ),
            ),
            subtitle: Text(
              '1222333333'
            ),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ),
          ListTile(
            title: Text(
              'PengPeng1',
              style: TextStyle(
                fontWeight: FontWeight.w300,
              ),
            ),
            subtitle: Text(
              '1222333333'
            ),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ),
          ListTile(
            title: Text(
              'PengPeng2',
              style: TextStyle(
                fontWeight: FontWeight.w300,
              ),
            ),
            subtitle: Text(
              '1222333333'
            ),
            leading: Icon(Icons.account_box, color: Colors.lightBlue,),
          ),
        ],
      ),
    );

    return MaterialApp(
      title: 'Row Widget Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            '垂直方向布局',
          ),
        ),
        body: Center(
          child: card,
        ),
      ),
    );
  }
}

页面跳转

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '导航演示',
    home: FirstScreen(),
  ));
}

class FirstScreen extends StatelessWidget {
  @override 
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '导航页面'
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '点击进入第二页',
          ),
          onPressed: (){
            Navigator.push(context, MaterialPageRoute(
              builder: (context) => SecondScreen(),
            ));
          },
        ),
      ),
    );
  }
}


class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'SecondPage'
        ),
      ),
      body: Center(
        child: RaisedButton(
          child: Text(
            '返回'
          ),
          color: Colors.red,
          onPressed: (){
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

页面跳转并正向传值

import 'package:flutter/material.dart';


class Product{
  final String title;    // 商品标题
  final String description;   // 商品描述
  Product(this.title, this.description);  // 构造函数
}

void main(){
  runApp(MaterialApp(
    title: '导航数据接受与传递',
    home: ProductList(
      products: List.generate(
        20, 
        (i)=>Product('商品$i', '商品描述$i'))
    ),
  ));
}

class ProductList extends StatelessWidget {
  final List<Product> products;
  ProductList({Key key, @required this.products}):super(key:key);

  @override
  Widget 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),
            onTap: (){
              Navigator.push(context, MaterialPageRoute(
                builder:(context)=>ProductDetail(product:products[index])
              ));
            }, // 响应⌚️
          );
        },
      )
    );
  }
}

class ProductDetail extends StatelessWidget {
  final Product product;
  ProductDetail({Key key, @required this.product}):super(key:key);

  @override
  Widget build(BuildContext context) {
    return 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 {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('首页'),
      ),
      body: Center(
        child: RouteButton(),
      ),
    );
  }
}

class RouteButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: (){
        _navigateToNewPage(context);
      },
      child: Text('去传值'),
    );
  }
}

_navigateToNewPage(BuildContext context) async {
  final reuslt = await Navigator.push(context, MaterialPageRoute(
    builder: (context)=>SecondPage(),
  ));

  Scaffold.of(context).showSnackBar(SnackBar(content: Text('$reuslt')));

}


class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '第二页'
        ),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            RaisedButton(
              child: Text(
                '编号一'
              ),
              onPressed: (){
                Navigator.pop(context, '编号一');
              },
            ),
            RaisedButton(
              child: Text(
                '编号二'
              ),
              onPressed: (){
                Navigator.pop(context, '编号二');
              },
            ),
          ],
        ),
      ),
    );
  }
}

flutter笔记汇总
Widget 基础Widget flutter笔记（一）-----官方示例&代码解读 flutter笔记（二）-...
Flutter笔记——帧绘制系列之一(源码学习)
Flutter系列学习笔记 Flutter笔记——handleDrawFrame帧绘制系列之一(源码学习) Flu...
2019-01-08
Mac环境flutter 学习笔记一.flutter真机调...
flutter笔记（六）-----按钮各种Button
flutter笔记汇总 flutter提供了以下几种按钮RaisedButton 、OutlineButton 、...
flutter 笔记 Hello World
flutter 笔记Hello World
2020-11-09
Flutter 学习笔记 ---- 2020-11-09 flutter 快速生成Model模型 pubspec....
Flutter环境配置&基本语法&如何使用库
Flutter环境配置&基本语法&如何使用库 1、flutter基本了解笔记开始,先贴出几个学习flutter的...
Flutter
搭环境【Flutter 学习笔记三】Windows 安装 Flutter 并运行 DEMO - 袁超 - Seg...
0.Flutter学习笔记以及问题记录
Flutter学习笔记新建项目 **1、Flutter create xxxx ** 先用命令建好项目再到工具内...
Flutter 学习笔记 1
本文的学习笔记来源于：Flutter 实战作者：wendux 一、Flutter 为什么采用 Dart 语言开发？...