flutter 笔记

center() 相当于div 

 sudo chmod -R 777 *

 安装包flutter pub get    flutter packages get

升级flutter sdk     flutter upgrade

包库 pub库地址  pub.dev 或者 https://pub.flutter-io.cn/

JSON to dart  类模型转换  https://javiercbk.github.io/json_to_dart/ 

选择设备启动 flutter run -d 8934C82E-6D26-43EA-9E40-5496FD001388

// 在弹窗 或者 插件里 改变变量的值

StatefulBuilder(
  builder: (context, changeState) {
    return Container(
      child:
    );
  },
)

边框
decoration: BoxDecoration(
  border: Border(
    bottom: BorderSide(
      color: Colors.red,
       Screen.width(3),
      style: BorderStyle.solid
    )
  )
),

阴影 和 圆角

decoration: BoxDecoration(
  color: ColorGather.colorMain(),
  borderRadius: BorderRadius.all(Radius.circular(Screen.width(20))),
  boxShadow: [
    BoxShadow(
        color: Colors.black87,
        offset: Offset(1.0, 2.0), //阴影xy轴偏移量
        blurRadius: 2.0, //阴影模糊程度
        spreadRadius: 0.5 //阴影扩散程度
    )
  ]
),

// 返回上一页刷新
deactivate() {
  super.deactivate();
  var bool = ModalRoute.of(context).isCurrent;
  if (bool) {
    _init();
  }
}

map方法获取index

list.asMap().map((index, item){
 return MapEntry(index, Text('${item}'));
}).values.toList();

 点击空白 input 失去焦点， 在页面的Scaffold外层加

GestureDetector(
    behavior: HitTestBehavior.translucent,
    onTap: () {FocusScope.of(context).requestFocus(FocusNode());},
    child:
);

ListView嵌套ListView

ListView(
children: <Widget>[

ListView.builder(
itemCount: 3,
shrinkWrap: true,
physics: new NeverScrollableScrollPhysics(),
itemBuilder: (context,index){
return
},
);
],
)

轮播 import 'package:flutter_swiper/flutter_swiper.dart';

Swiper(
    itemBuilder: (BuildContext context,int index){
      return Image.asset('images/home/banner_01.jpg', fit: BoxFit.fill,);
    },
    itemCount: 3,
    pagination: SwiperPagination(
      margin: EdgeInsets.all(Screen.width(8)),
      builder: DotSwiperPaginationBuilder(
        activeColor: ColorGather.colorMain()
      )
    ),
    loop: false,
    duration: 500,
    autoplay: true
),

// 复制

 import 'package:flutter/services.dart'; //复制

Clipboard.setData(ClipboardData(text: '复制到剪切板'));

      var data = ClipboardData(text: vx);

                        Clipboard.setData(data);

                        if(data != null) {

                          DialogComponents.toast(context, content: '复制成功');

                        }

//读取剪切板 var text = Clipboard.getData(Clipboard.kTextPlain);

Offstage 组件
控制child是否显示
当offstage为true，控件隐藏； 当offstage为false，显示；
当Offstage不可见的时候，如果child有动画等，需要手动停掉，Offstage并不会停掉动画等操作。

r 键：点击后热加载，也就算是重新加载吧。

p 键：显示网格，这个可以很好的掌握布局情况，工作中很有用。

o 键：切换 android 和 ios 的预览模式。

q 键：退出调试预览模式。

 

   单次Frame绘制回调 初始化调用

SchedulerBinding.instance.addPostFrameCallback((v) {
});

/// 帧绘制完成回调通知
WidgetsBinding.instance.addPostFrameCallback((_) {
  EasyLoading.showSuccess('Great Success!');
});

圆形进度条 和 loading

CircularProgressIndicator(
  strokeWidth: Screen.width(6),
  backgroundColor: Colors.black,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
),

页面禁止左右滑动   physics: NeverScrollableScrollPhysics(), //禁止 pageView 滑动

点击穿透问题 GestureDetector( behavior: HitTestBehavior.opaque, onTap: () { return false; } )

 

超出屏幕溢出

SingleChildScrollView(
    child: new ConstrainedBox(
      constraints: new BoxConstraints(
        minHeight: 120.0,
      ),
      child: Container()
      ),
    );

省市区三级联动https://pub.dev/packages/city_pickers

 

删除数据  

 新建变量空数组, 找到所有没有选中的,赋值给列表,就删除了选中的

MaterialApp配置

return MaterialApp(
    debugShowCheckedModeBanner: false, // 去掉软件右上角的debug
    initialRoute: '/', // 默认显示的路由
    onGenerateRoute: onGenerateRoute // 路由配置
);

AspectRatio  轮播图用的多

宽高比，最终可能不会根据这个值去布局，具体则要看综合因素，外层是否允许按照这种比率进行布局，这只是一个参考值

动态组件

class HttpPage extends StatefulWidget{
  HttpPage({Key key});
  _HttpPage createState() => _HttpPage();
}

import 'package:flutter/material.dart';

class HttpPage extends StatefulWidget{
  @override
  createState() => _HttpPage();
}

class _HttpPage extends State {
  @override

  initState() {
    super.initState();
  }

  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(title: Text('http'),),
      body: ListView(
        children: <Widget>[

        ],
      ),
    );
  }
}

转换json

   import 'dart:convert'

   var mapData={"name":"张三","age":"20"};

   var strData='{"name":"张三","age":"20"}';

   print(json.encode(mapData)); //Map 转换成 Json 字符串

   print(json.decode(strData)); //Json 字符串转化成 Map 类型

 

进度条

https://zhuanlan.zhihu.com/p/90035192

 Flutter Icons图标库地址1

https://material.io/tools/icons/?icon=account_balance&style=baseline

Flutter Icons图标库地址2

http://fluttericon.com/

if(data != null) {
  DialogComponents.toast(context, content: '复制成功');
}