Flutter 笔记

Author Avatar
Bruce Yang 3月 14, 2019
  • 在其它设备中阅读本文章

记录 Flutter 开发学习过程中的工具,错误,解决思路等。

1. 渐变色AppBar

//渐变色AppBar
//https://github.com/loosaSH/flutter-appbar/blob/master/lib/appbar_gradient.dart
appBar: PreferredSize(
  child: Container(
    padding: EdgeInsets.only(top: MediaQuery.of(context).padding.top),
    child: Padding(
      padding:
          const EdgeInsets.only(left: 15.0, top: 15.0, bottom: 15.0),
      child: Text(
        Constants.appName,
        style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.w500,
            color: Colors.white),
      ),
    ),
    decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.red, Theme.of(context).primaryColor]),
        boxShadow: [
          BoxShadow(
            color: Colors.grey[500],
            blurRadius: 20.0,
            spreadRadius: 1.0,
          )
        ]),
  ),
  preferredSize: Size(MediaQuery.of(context).size.width, 150.0),
),

2. ListItem

import 'package:flutter/material.dart';

/// 列表项
 class ListItem extends StatefulWidget {
  // 点击事件
   final VoidCallback onPressed;
  // 图标
   final Widget icon;
  // 标题
   final String title;
  final Color titleColor;
  // 描述
   final String describe;
  final Color describeColor;
  // 右侧控件
   final Widget rightWidget;

  // 构造函数
   ListItem({
    Key key,
    this.onPressed,
    this.icon,
    this.title,
    this.titleColor: Colors.black,
    this.describe,
    this.describeColor: Colors.grey,
    this.rightWidget,
  }) : super(key: key);

  @override
  _ListItemState createState() => _ListItemState();
}

class _ListItemState extends State<ListItem> {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
      onPressed: widget.onPressed,
      padding: EdgeInsets.all(0.0),
      shape: Border.all(
        color: Colors.transparent,
        width: 0.0,
        style: BorderStyle.none,
      ),
      child: Container(
          height: 60.0,
          width: double.infinity,
          child: Row(
            children: <Widget>[
              widget.icon != null
                  ? Container(
                      padding: EdgeInsets.all(14.0),
                      child: SizedBox(
                        height: 32.0,
                        width: 32.0,
                        child: widget.icon,
                      ),
                    )
                  : Container(
                      width: 14.0,
                    ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    widget.title != null
                        ? Text(
                            widget.title,
                            style: TextStyle(
                              color: widget.titleColor,
                              fontSize: 14.0,
                              fontWeight: FontWeight.bold,
                            ),
                          )
                        : Container(),
                    widget.describe != null
                        ? Text(
                            widget.describe,
                            maxLines: 2,
                            style: TextStyle(
                                color: widget.describeColor, fontSize: 12.0),
                          )
                        : Container(),
                  ],
                ),
              ),
              widget.rightWidget == null ? Container() : widget.rightWidget,
              Container(
                width: 14.0,
              ),
            ],
          )),
    );
  }
}

/// 空图标
 class EmptyIcon extends Icon {
  EmptyIcon() : super(Icons.hourglass_empty);
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

3. Appbar 隐藏返回键

/**
  * 如果没有leading,automaticallyImplyLeading为true,就会默认返回箭头
  * 如果 没有leading 且为false,空间留给title
  * 如果有leading,这个参数就无效了
  */
automaticallyImplyLeading: true,

作者:刘成
链接:https://juejin.im/post/5be7b9c56fb9a049d61d0d9b
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

4. TextField 自动换行

TextField(
  maxLines: null,
)