flutter開發常用組件複製即用

1、文本
Text(
  '社區周邊',
  textAlign: TextAlign.left,
  style: TextStyle(
      color: Colors.black,
      fontSize: ScreenUtil().setSp(22),
      decoration: TextDecoration.none),
),

2、圖片

Image.asset(
  'images/sq_huodon_icon.png',
  width: ScreenUtil().setWidth(44),
  height: ScreenUtil().setWidth(44),
),

3.圓角背景

Container(
  width: ScreenUtil().setWidth(622),
  margin: EdgeInsets.only(
      left: ScreenUtil().setWidth(32),
      right: ScreenUtil().setWidth(32),
      top: ScreenUtil().setWidth(32)),
  decoration: new BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(12.0)),
  ),
),

4.、自定義彈窗

showDialog<Null>(
    context: context,
    barrierDismissible: true,
    builder: (BuildContext context) {
      return SimpleDialog(
        // 手勢處理事件
        backgroundColor: Colors.transparent,
        children: <Widget>[
          Material(
            type: MaterialType.transparency,
            child: Center(
              child: Container(
                width: ScreenUtil().setWidth(622),
                margin: EdgeInsets.only(
                    left: ScreenUtil().setWidth(32),
                    right: ScreenUtil().setWidth(32),
                    top: ScreenUtil().setWidth(32)),
                decoration: new BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(12.0)),
                ),
              ),
            ),
          ),
        ],
      );
    },
  );

5、有顏色背景圓角文字

Container(
  margin: EdgeInsets.only(left: 7),
  padding: EdgeInsets.only(
      left: ScreenUtil().setHeight(5),
      right: ScreenUtil().setHeight(5),
      bottom: ScreenUtil().setHeight(1)),
  height: ScreenUtil().setHeight(26),
  decoration: BoxDecoration(
    border:
    new Border.all(width: 1, color: Color(0xFF0091FF)),
    color: Colors.white,
    borderRadius: BorderRadius.all(Radius.circular(3.0)),
  ),
  child: Center(
    child: Text(
      '社區',
      style: TextStyle(
        fontWeight: FontWeight.bold,
        color: Color.fromRGBO(5, 169, 245, 1.0),
        fontSize: ScreenUtil().setSp(18),
      ),
      textAlign: TextAlign.center,
    ),
  ),
),

6、圓滑按鈕控件

RaisedButton(

  child: new Text(
      "卡"),
  color: Colors.white,

  textColor: Color.fromRGBO(29, 168, 239, 1.0),
  onPressed: () {
    Navigator.of(context).pop(); //退出彈出框
    getGsiX(usersList.data.id,
        usersList.data.typeSignCount[0].typeId);
  },
  disabledColor: Colors.grey,
  disabledTextColor: Colors.white,
  disabledElevation: 4,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20.0),
      side: BorderSide(
          color: Color.fromRGBO(
              196, 236, 255, 1.0))), //圓角大小
)

6、漸變背景

Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
        colors: [Color(0xFFfbab66), Color(0xFFf7418c)],
        begin: Alignment.topCenter,
        end: Alignment.bottomCenter,
      )),
    );

7.毛玻璃背景彈窗

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screenutil.dart';
showBuyModalBottomSheet({@required BuildContext context}) {
  showModalBottomSheet(
      barrierColor:  Colors.white.withOpacity(0.1),
      backgroundColor: Colors.transparent,
      context: context,
      builder: (BuildContext context) {
        return Container(
          color: Colors.transparent,
          child: GestureDetector(
            child: BottomModal( //彈窗樣式
              onCancel: () { //取消回調
                Navigator.of(context).pop(); //隱藏彈出框
              },
              onSure: () async { //確認回調
              },
            ),
          ),
        );
      });
}

class BottomModal extends StatefulWidget {
  final Function onSure;
  final Function onCancel;

  const BottomModal({Key key, this.onSure, this.onCancel}) : super(key: key);

  @override
  State createState() {
    return _BottomModalState(onSure: this.onSure, onCancel: this.onCancel);
  }
}

class _BottomModalState extends State {
  final Function onSure;
  final Function onCancel;

  _BottomModalState({this.onSure, this.onCancel});

  @override
  Widget build(BuildContext context) {
    return
      Container(
        child: Stack(
            children: <Widget>[
             BackdropFilter(
                filter: ImageFilter.blur(sigmaX: 18, sigmaY: 18),
                  child: Container(
                    color: Colors.transparent,
                    height: double.infinity,
                    child: Text(
                      '我的申請',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: ScreenUtil().setSp(28),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
              ),
            ]
        ),
      );
  }
}