Container-div
  padding: const EdgeInsets.all(8),
  decoration: BoxDecoration(
      color: gridItem.color, borderRadius: BorderRadius.circular(8)),
Container({
  this.alignment,
  this.padding, //容器内补白，属于decoration的装饰范围
  Color color, // 背景色
  Decoration decoration, // 背景装饰
  Decoration foregroundDecoration, //前景装饰
  double width,//容器的宽度
  double height, //容器的高度
  BoxConstraints constraints, //容器大小的限制条件
  this.margin,//容器外补白，不属于decoration的装饰范围
  this.transform, //变换
  this.child,
  ...
})

EdgeInsets.all(8),

• fromLTRB(double left, double top, double right, double bottom)：分别指定四个方向的填充。
• all(double value) : 所有方向均使用相同数值的填充。
• only({left, top, right ,bottom })：可以设置具体某个方向的填充(可以同时指定多个方向)。
• symmetric({ vertical, horizontal })：用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right

BoxDecoration({
  Color color, //颜色
  DecorationImage image,//图片
  BoxBorder border, //边框
  BorderRadiusGeometry borderRadius, //圆角
  List<BoxShadow> boxShadow, //阴影,可以指定多个
  Gradient gradient, //渐变
  BlendMode backgroundBlendMode, //背景混合模式
  BoxShape shape = BoxShape.rectangle, //形状
})

旋转布局

DecoratedBox(
            decoration: BoxDecoration(),
            child: Transform.rotate(
              //旋转90度
              angle: math.pi / 2,
              child: PopupMenuButton(itemBuilder: (context) {
                return [
                  const PopupMenuItem<Text>(child: Text('扫一扫')),
                ];
              }),
            ),
          )

注意：要使用math.pi需先进行如下导包。

import 'dart:math' as math;

绝对定位

Stack(
  fit: StackFit.expand,  //扩伸到Stack的大小。
  alignment: Alignment.center, //指定未定位或部分定位widget的对齐方式
  children: <Widget>[
	Container(
	  child: Text("xxxxxx", style: TextStyle(color: Colors.white)),
	  color: Colors.pink,
	),
	Positioned(
	  left: 15.0,
	  top: 30.0,
	  child: Text("yyyyyy"),
	),
	Positioned(
	  top: 15.0,
	  child: Text("zzzzzz"),
	)
  ],
);

边框

底边

decoration: const BoxDecoration(
                      border: BorderDirectional(
                          bottom: BorderSide(color: Color(0xFFF2F2F2))))

全边

decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          border:
              Border.all(color: color, width: 1.w, style: BorderStyle.solid)),

   new Container(
            height: 35,
            width: MediaQuery.of(context).size.width - 140,
            decoration: BoxDecoration(
              border:Border(bottom:BorderSide(width: 1,color: Color(0xffe5e5e5)) )
//              border: Border.all(color: Colors.grey,width: 0.5),
 
//              borderRadius: BorderRadius.circular(5),
            ),

阴影

BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(6.0),
          boxShadow: [
            //卡片阴影
            BoxShadow(
              color: Colors.black.withOpacity(0.2),
              offset: const Offset(2.0, 2.0),
              blurRadius: 4.0,
            )
          ])

tabbar 下划线

indicator: UnderlineTabIndicator(
                borderSide: BorderSide(width: 4, color: Colors.white), // Tab下划线
                insets: EdgeInsets.symmetric(horizontal: 20))),

三点省略号 ...

Text(
  'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
  softWrap: true,
  textAlign: TextAlign.left,
  overflow: TextOverflow.ellipsis,
  maxLines: 3,
  style: TextStyle(
    fontSize: 14,
  ),
),

Flutter常用widget ——IntrinsicHeight

IntrinsicHeight(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(width: 50,color: Colors.green),
          Container(height: 100,width: 50,color: Colors.red),
          Container(width: 50,color: Colors.black)
        ],
      ),
    );

时间选择器

日期时间范围选择器

void showDateSelect() async {
    //获取当前的时间
    DateTime start = DateTime.now();
    //在当前的时间上多添加4天
    DateTime end = DateTime(start.year, start.month, start.day + 4);

    //显示时间选择器
    var selectTimeRange = await showDateRangePicker(
      //语言环境
      locale: const Locale("zh", "CH"),
      context: context,
      //开始时间
      firstDate: DateTime(2020, 1),
      //结束时间
      lastDate: DateTime(2024, 1),
      cancelText: "取消",
      confirmText: "确定",
      //初始的时间范围选择
      // initialDateRange:
      //     DateTimeRange(start: DateTime.now(), end: DateTime.now()),
    );
    //结果
    dateSelectText = selectTimeRange.toString();
    //选择结果中的开始时间
    DateTime? selectStart = selectTimeRange?.start;
    //选择结果中的结束时间
    DateTime? selectEnd = selectTimeRange?.end;

    setState(() {
      print(selectStart);
      print(selectEnd);
    });
  }

时间选择器

RaisedButton(
 onPressed: () async {
  var result = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2020),
    lastDate: DateTime(2021));
  print('$result');
 },
)

直接跳转新页面

value = await Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => TFormSelectorPage(
                  title: title,
                  options:
                      options!.every((element) => (element is TFormOptionModel))
                          ? <TFormOptionModel>[...?options]
                          : options?.map((e) {
                              return TFormOptionModel(value: e.toString());
                            }).toList(),
                  isMultipleSelector: isMultipleSelector),
            ),
          );
          print(value);
          controller.text = value;
          formFeild.value = value;

关闭弹窗

Navigator.of(context).pop(…)方法来关闭对话框的，这和路由返回的方式是一致的，