Flutter开发中一些问题的总结

container width、height 100%

1
2
3
4
5


FractionallySizedBox(
    widthFactor: 1,
    heightFactor: 1,
    child: ,
)

1
2


double width = MediaQuery.of(context).size.width
double height = MediaQuery.of(context).size.height

沉浸式背景图片

背景图片铺满AppBar及状态栏

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


Widget build(BuildContext context) {
    return new Stack(
      children: <Widget>[
        Container(
          child: Image.network('https://www.bing.com/az/hprichbg/rb/Punakaiki_DE-DE0884339574_1920x1080.jpg'),
          color: Colors.lightGreen,
        ),
        Scaffold(
          backgroundColor: Colors.transparent,
          appBar: AppBar(
            backgroundColor: Colors.transparent,
            title: Text('Coin'),
          ),
          body: MyCoinPage(),
        )
      ],
    );
  }

AppBar no shadow

AppBar默认底部有阴影。去掉只需要配置参数即可：

1
2
3


AppBar(
    elevation:0.0
)

自定义字体

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


flutter:
  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true

  fonts:
    - family: Kphi
      fonts:
        - asset: assets/fonts/Komet-Pro-Heavy-Italic.otf

获取页面生命周期

使用with WidgetBingdingOBserver后，可以堆页面的的生命周期进行监听。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


class _LifecycleWatcherState extends State<LifecycleWatcher> with WidgetsBindingObserver {
  AppLifecycleState _lastLifecycleState;

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addObserver(this);
  }

  @override
  void dispose() {
    WidgetsBinding.instance.removeObserver(this);
    super.dispose();
  }

  @override
  void didChangeAppLifecycleState(AppLifecycleState state) {
    print('current state: $state');
    setState(() {
      _lastLifecycleState = state;
    });
  }
}

网络图片加载组件

默认图片记载组件networkImage，当图片链接错误或为空时，会报exception导致Crash。FadeInImage同理。参考：github

试了好几款组件都没有做错误处理，最终找到一个可用组件：Flutter_image,同时配合FadeInImage设置默认占位图，完美。

1
2
3
4
5


FadeInImage(
  fit: fit,
  placeholder: AssetImage(placeHolderImage),
  image: NetworkImageWithRetry(imgUrl),
),

主题颜色 ThemeData

ActionSheet 点击后隐藏

点击ActionSheet选择某项后，隐藏。

1

Navigator.of(context, rootNavigator: true).pop("Discard");

组织软键盘顶起页面

当软键盘顶起时，会将页面高度缩减，导致页面中的内容随着父级高度变化而变化，会导致诸多问题。解决方案：

1
2
3
4
5
6


return Scaffold(
  appBar: AppBar(
    title: new Text("通讯录"),
  ),
   resizeToAvoidBottomPadding: false, //输入框抵住键盘 内容不随键盘滚动
);

键盘确认按钮样式

键盘确认按钮会显示为搜索,点击后触发onSumitted事件。

1
2
3
4
5


TextFormField( 
  ...
  textInputAction: TextInputAction.done,
  ...
)

Contents