Flutter开发者必知必会的十个开发小技巧

0 前言

1.SafeArea
2.Wrap
3.RichText
4.ClipRRect
5.MediaQuery
6.FutureBuilder
7.Flexible
8.SizedBox
9.Aligin
10.Divider

如果上面的组件你能够熟练使用，那么就可以关闭此页面去开心的玩耍啦。如果你不清楚他们有什么用法，那么久往下看吧。每一个都有代码示例哦。

Tips 1 - SafeArea

直通车 https://api.flutter.dev/flutter/widgets/SafeArea-class.html

可以有效的防止刘海屏幕内容被遮挡的问题。 下面给出实列说明

先给出一段简单的代码看看

class MyApp extends StatelessWidget {

  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // At the top level of our app, we'll, create a ScopedModel Widget. This
    // will provide the CounterModel to all children in the app that request it
    // using a ScopedModelDescendant.
    return MaterialApp(
      title: "demo",
      home: Scaffold(
        body:SafeAreaDemo() ,
      ),
    );
  }
}

class SafeAreaDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
		
      color:Colors.blue ,
      child:Text("Hello  Demo", style: TextStyle(fontSize: 24),) ,
    );
  }
}

这就是一个很普通的一个Container包裹了一个文本，（这是一个没有AppBar的demo），我们看看再普通屏幕上的显示效果和刘海屏的效果

普通手机

刘海屏手机

纠正后的代码

class SafeAreaDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Container(
        color:Colors.blue ,
        child:Text("Hello  Demo", style: TextStyle(fontSize: 30),) ,
      ),
    );
  }
}	

还是2种样式的效果看下

普通手机

刘海屏手机

1.2 总结

可以看到加上了SafeArea标签以后在刘海屏手机和普通沙鸥国际上上能够有效的把我们内容的安全区域留出来，保证我们的内容不会被遮挡。
SafeArea内部是通过MediaQuery和Padding帮助我们实现了这样一个效果，如果有需要自己定制特殊的需求也可以自己用这种方法来实现。

Tips 2 -Wrap

直通车：https://api.flutter.dev/flutter/widgets/Wrap-class.html

防止控件超出屏幕区域之外，自适应子控件的排列方式

还是老样子先看看代码

class WarpDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Text(" Hell1 " ,style: TextStyle(fontSize: 24),),
          Te