flutter 笔记

Flutter 基本信息

// Container组件在Flutter中相当于HTML中的div元素
Container()

// 为文件设置权限，使其可读可写可执行
sudo chmod -R 777 *

// 获取Flutter的包
flutter pub get
flutter packages get

// 升级Flutter SDK版本
flutter upgrade

// pub库是Flutter中的包管理库，可以从以下两个地址查找包
pub.dev 或者 https://pub.flutter-io.cn/

// 用于将JSON格式的数据转换为Dart类模型
JSON to dart 类模型转换

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

Flutter UI 组件

// 使用StatefulBuilder在弹窗或插件中改变变量的值
StatefulBuilder(
  builder: (context, changeState) {
    return Container(child: );
  },
)

// 给组件添加边框
decoration: BoxDecoration(
  border: Border(
    bottom: BorderSide(
      color: Colors.red,
      width: 3,  // 宽度
      style: BorderStyle.solid
    )
  )
)

// 给组件添加阴影和圆角
decoration: BoxDecoration(
  color: Colors.red,
  borderRadius: BorderRadius.circular(20),
  boxShadow: [
    BoxShadow(
      color: Colors.black87,
      offset: Offset(1.0, 2.0),
      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();

// 点击空白部分让输入框失去焦点
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 ;
      },
    )
  ],
)

// 使用Flutter轮播组件显示轮播图
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(8),
    builder: DotSwiperPaginationBuilder(
      activeColor: Colors.red
    )
  ),
  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) {
  // 显示“复制成功”的Toast提示
  DialogComponents.toast(context, content: '复制成功');
}
// 读取剪切板内容
var text = Clipboard.getData(Clipboard.kTextPlain);

Flutter 高级组件

// Offstage组件用于控制child是否显示
Offstage(
  offstage: true,
  child:
)

// Flutter开发工具的快捷键
// r键：进行热加载
// p键：显示布局网格
// o键：在Android和iOS预览模式之间切换
// q键：退出调试模式

// SchedulerBinding和WidgetsBinding用于回调
// 当单次Frame绘制完成后进行回调
SchedulerBinding.instance.addPostFrameCallback((v) {
});
WidgetsBinding.instance.addPostFrameCallback((_) {
  // 显示成功的提示信息
  EasyLoading.showSuccess('Great Success!');
})

// 显示圆形进度条
CircularProgressIndicator(
  strokeWidth: 6,
  backgroundColor: Colors.black,
  valueColor: AlwaysStoppedAnimation<Color>(Colors.red),
)

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

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

// 当内容超出屏幕时使用ScrollVie

Flutter 常用工具与库

// Flutter图标库地址
Flutter Icons图标库地址1
Flutter Icons图标库地址2

// 省市区三级联动插件
省市区三级联动

// 进度条插件
进度条

// 使用MaterialApp配置Flutter应用的基础属性
return MaterialApp(
  debugShowCheckedModeBanner: false,
  initialRoute: '/',
  onGenerateRoute: onGenerateRoute
)

// AspectRatio用于设置宽高比
AspectRatio()

// 动态组件的使用
class HttpPage extends StatefulWidget{
  @override
  createState() => _HttpPageState();
}
class _HttpPageState extends State<HttpPage> {
  @override
  Widget build(BuildContext context){
    return ;
  }
}

// 使用Navigator组件进行页面跳转
Navigator.push(context, MaterialPageRoute(builder: (context) => NextPage()))

// Flutter高德地图SDK
Flutter高德地图SDK

// Flutter加解密库
import 'package:encrypt/encrypt.dart';
final key = Key.fromUtf8('your32lengthsupersecretnooneknows1');
final iv = IV.fromLength(16);
final encrypter = Encrypter(AES(key));
final encrypted = encrypter.encrypt('hello world', iv: iv);
final decrypted = encrypter.decrypt(encrypted, iv: iv);