Flutter tip

1.Android is immersive

// SystemUiOverlayStyle is used to override navigationBar,statusBar, etc. // SystemChrome controls OS image interface and OS interaction class // SystemChrome.setPreferredOrientations: Set herself screen / / SystemChrome setSystemUIOverlayStyle () : / / set the status bar and navigation / / SystemChrome setEnabledSystemUIOverlays () to the operation of the status bar: whether to hide status bar or three Jin Gangjian, often used for keyboard pops up, three main Jin Gangjian hiddenif (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
Copy the code

2.precacheImage

There is a loading process for loading local images in Flutter. For example, when clicking the icon to switch the icon, it will flash for the first time. In particular, when you swipe left or right to switch images, there will be an obvious white screen flash.

Workaround: Use precacheImage, which prestores the image in the image cache. If the image is used later, it will load faster.

precacheImage(AssetImage("images/logo.png"), context); 
Copy the code

3. Set the color of the status bar

Appbar: appbar (title: Text('... '), brightness: Brightness.dark, ); // Widget build(BuildContext context) {return AnnotatedRegion<SystemUiOverlayStyle> (
        value: SystemUiOverlayStyle.light,
        child: ....
    )
}

Copy the code

4. Setting the width and height of the Stack component does not work

Container(height: 300, width: 300, color: Colors. Blue, child: Stack(children: <Widget>[ Positioned.fill( child: Container( height: 100, width: 100, color: Red,),),),), // The solution: wrap the Center, Align or UnconstrainedBox, for example: c-fill (child: Align(child: Container( height: 100, width: 100, color: Colors.red, ), ), )Copy the code

5.default value of optional parameter must be constant

This exception is often raised in class constructors. Exception message: The optional parameter must be constant

class BarrageItem extends StatefulWidget { BarrageItem({ this.text, this.duration = Duration(seconds: 3) }); } // Const Duration _kDuration = Duration(seconds: 3); class BarrageItem extends StatefulWidget { BarrageItem({ this.text, this.duration = _kDuration }); }Copy the code

TextField gets focus and loses focus dynamically

// define _focusNode = FocusNode(); TextField( focusNode: _focusNode, ... ) ; Focusscope.of (context).requestFocus(_focusNode); // Lose focus _focusNode.unfocus();Copy the code

7. Create a rounded Button

Method 1: Use FlatButton and RaiseButton

Circular (18.0), side: BorderSide(color: colors.red)Copy the code

Method 2: Use ClipReact

ClipReact(
    borderRadius: Border.circle(40),
    child: RaiseButton(
        onPressed:(){},
        child: Text("Button")))Copy the code

Method 3: Use ButtonTheme

ButtonTheme(
    shape: RoundedRectangleRorder(borderRadius: BorderRadius.circle(20),
    child: RaiseButton(
        onPressed:() {},
        child: Text("...")))Copy the code

8. Fill the Button with the parent component

Expand (Child: RaisedButton(...) ConstrainedBox(contraints: const BoxConstraints(minWidth: double. Infinity), child: RaisedButton(...) MinWidth: double. Infinity, child: MaterialButton(onPress:){}, child: Text(minWidth: double. Infinity, child: MaterialButton(onPress:){}'Raised Button')))Copy the code

9. How to add rounded corners to the picture

ClipRRect(borderRadius: borderRadius. Circular (8.0), Child: Image.network(...) CircleAvatar(radius: 20, backgroundImage: NetworkImage('....'// ClipOval(child: Image.network("image_url", height: 100, width: 100, fit: boxfit.cover) BoxDecoration( image: DecorationImage( fit: BoxFit.cover, image: NetworkImage('....')
        ),
        borderRadius: BorderRadius.all(Radius.circular(8.0)),
        color: Colors.redAccent
    )
)
Copy the code

10. How to ununderline TextField

InputDecoration(
    border: InputBorder.none,
    hintText: 'Username'
)
Copy the code

11. Show/hide controls

// Controls one Opacity(0, child:...) // control 2 Visibility(visible:false, child: ... ) // set offstage(offstage:true,
    child:...
)
Copy the code

12. How to intercept Android’s back button and process it

WillPopScope handles whether to leave the current page. Ask the user whether to exit

Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async => {
            return showDialog(
                context: context,
                builder: (context) =>
                    AlertDialog(
                    title: Text("Are you sure you want to quit?"),
                    actions: <Widget>[
                        RaisedButton(
                            child: Text('exit'),
                            onPressed ()=>Navigator.of(context).pop(true),
                        ),
                        RaisedButton(
                            child: Text('cancel'),
                            onPressed ()=>Navigator.of(context).pop(false), ), ] ) ) }, child: Scaffold(child: ...) )}Copy the code

Click twice quickly to exit

DateTime _lastQuitTime;
Widget build(BuildContext context) {
    return WillPopScope(
        onWillPop: () async => {
            if(_lastQuitTime == null ||  DateTime.now().difference(_lastQuitTime).inSeconds > 1) {
                Scaffold.of(context)
                    .showSnackBar(SnackBar(content: Text('Press the Back button again to exit')));
                _lastQuitTime = DateTime.now();
                return false;
            } else {
                print('exit');
                Navigator.of(context).pop(true);
                return true; } }, child: Scaffold(child: ...) )}Copy the code

13. Set AppBar Height

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example', home: Scaffold(PreferredSize(PreferredSize: size.fromheight (50.0)), // The desired height child: AppBar( // ... ) ), body: // ... ) ); }}Copy the code

14.Column’s child controls are aligned to the left at the bottom

return Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  mainAxisAlignment: MainAxisAlignment.end,
  children: <Widget>[
      //your elements here
  ],
);
Copy the code

15.Illegal percent encoding in URI

Use the Fluro route to pass the parameter for the next page, and the parameter is Chinese times this error. The solution is to use uri. encodeComponent to decomponent when using Chinese parameters in urls.

Application.router.navigateTo(context, '$routeName? title=${Uri.encodeComponent(title)} ', transition: TransitionType.inFromRight);
Copy the code

16.Vertical viewport was given unbounded height

This bug is caused by using the ListView in column. The solution is to use the shrinkWrap property in the ListView component

returnColumn( children: <Widget>[ ListView.builder( itemCount: _datalist.length, itemBuilder: _buildItem, // shrinkWrap shrinkWrap:true,)]);Copy the code

17. Hide the keyboard

Focusscope.of (context).unfocus();Copy the code

TabBar switch caused rebuild build issues (I don’t know why mine didn’t work, record first, improve later)

Var _onePageKey = PageStorageKey("onePages");
var _twoPageKey = PageStorageKey("twoPages");
TabBarView(
    controller: _controller,
    children: <Widget>[
        _onePage(_onePageKey),
        _twoPage(_twoPageKey)
    ]
)
Copy the code