No connected devices

It is estimated that most of this problem has been encountered, and the solutions are as follows:

1. Execute flutter doctor

   Doctor summary (to see all details, run flutter doctor -v):
   [✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.6 18G1012,
       locale zh-Hans-CN)
   
   [!] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
       ! Some Android licenses not accepted.  To resolve this, run: flutter doctor
         --android-licenses
   [✓] Xcode - develop for iOS and macOS (Xcode 11.3.1)
   [✓] Android Studio (version 3.5)
   [✓] Connected device (1 available)
   
   ! Doctor found issues in 1 category.
   

   Make sure there are no red forks.

2. Start the mobile phone or simulator (Android system is larger than 16), switch on USB debugging mode, different mobile phone opening methods are slightly different. Take Huawei mobile phone for example: Enter Settings->System->About mobile phone, click version number 5 times quickly and continuously, prompt to open developer mode, return to settings, then there will be a developer options menu, enter, open developer options and USBDebug, pop up the authorization menu and agree.

3. Open Android Studio and view the connected phone:

   

4. If you still can't connect to your phone, open the Android Studio setup interface:

   

   Select the most recent API.

5. At this point, we can basically solve the problem. If we still can't connect, it is basically the problem of adb. It is likely that the ADB port is occupied. The solution of ADB can Baidu, causing many kinds of ADB problems.

Create Toast Tips

Snackbars is the Toast hint in the Material Design ing design specification, and Snackbar is used as follows:

Scaffold.of(context).showSnackBar(SnackBar(
      content: Text("Sending Message"),
    ));

This effect is not very acceptable in China, so third-party plug-ins are generally used. fluttertoast

Fluttertoast.showToast(
        msg: "This is Toast messaget",
        toastLength: Toast.LENGTH_SHORT,
        gravity: ToastGravity.CENTER,
        timeInSecForIos: 1
    );

Create a rounded Button

There are many ways to create a rounded Button. Here are a few simple things:

1. Use FlatButton and RaisedButton

   shape: RoundedRectangleBorder(
     borderRadius: BorderRadius.circular(18.0),
     side: BorderSide(color: Colors.red)
   ),
   

   

2. Using ClipRRect

   ClipRRect(
     borderRadius: BorderRadius.circular(40),
     child: RaisedButton(
       onPressed: () {},
       child: Text("Button"),
     ),
   )
   

3. Use ButtonTheme

   ButtonTheme(
     shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
     child: RaisedButton(
       onPressed: () {},
       child: Text("Button"),
     ),
   )
   

Add Startup Page

Flutter applications start up with a period of white screen, because the program starts the engine, so App starts slowly for the first time. In the native end, a period of white start-up page will be displayed. We use this white start-up page as the application start-up page, and replace it with our own picture. The program start-up page can only be a picture, can not interact, if you need to start it.Pages with interactive effects are recommended to use Flutter.

Replace the startup page picture on the Android side and open the android/app/src/main/res/drawable/launch_background.xml file as follows:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/launch_image" />
    </item> -->
</layer-list>

Modify to:

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splash" />
    </item>
</layer-list>

Copy the splash.png picture to the drawable folder.

On the iOS side, open the three LaunchImage.png pictures under ios/Runner/Assets.xcassets/LaunchImage.imageset and replace them with the same name.

Modify the package name/BundleIdentifier for the application

Open android/app/build.gradle on the Android platform:

defaultConfig {
    applicationId "com.example.fluttersample"
    minSdkVersion 16
    targetSdkVersion 28
    versionCode flutterVersionCode.toInteger()
    versionName flutterVersionName
    testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
}

Modify the applicationId property.

The iOS platform opens ios/Runner/Info.plist and modifies the value of the CFBundleIdentifier:

<key>CFBundleIdentifier</key>
	<string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

How to add a border to a control

new Container(
  margin: const EdgeInsets.all(15.0),
  padding: const EdgeInsets.all(3.0),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.blueAccent)
  ),
  child: Text("My Awesome Border"),
)

Fill Button with Parent Component

SizedBox.expand(
  child: RaisedButton(...),
)

perhaps

SizedBox(
  width: double.infinity,
  // height: double.infinity,
  child: RaisedButton(...),
)

perhaps

ConstrainedBox(
    constraints: const BoxConstraints(minWidth: double.infinity),
    child: RaisedButton(...),
)

perhaps

ButtonTheme(
  minWidth: double.infinity,
  child: MaterialButton(
    onPressed: () {},
    child: Text('Raised Button'),
  ),
),

How to Add ListView to Column

Specify a height for the ListView:

Column(
  children: <Widget>[
    Container(
      height: 50,
      child: ListView(),
    )
  ],
)

Or pave Column:

Column(
  children: <Widget>[
     Expanded(
      child: horizontalList,
    )
  ],
);

How to add rounded corners to a picture

ClipRRect(
    borderRadius: BorderRadius.circular(8.0),
    child: Image.network(
        '',
    ),
)

perhaps

CircleAvatar(
  radius: 20,
  backgroundImage: NetworkImage('https://via.placeholder.com/140x100')
)

perhaps

ClipOval(
  child: Image.network(
    "image_url",
    height: 100,
    width: 100,
    fit: BoxFit.cover,
  ),
),

perhaps

Container(
        width: 100.0,
        height: 150.0,
        decoration: BoxDecoration(
          image: DecorationImage(
                fit: BoxFit.cover,
                image: NetworkImage('Path to your image')
              ),
          borderRadius: BorderRadius.all(Radius.circular(8.0)),
          color: Colors.redAccent,
        ),

How to Underline TextField

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

If you prevent UI switching between horizontal and vertical screens as the phone rotates

Set the supported direction:

class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      SystemChrome.setPreferredOrientations([
        DeviceOrientation.portraitUp,
        DeviceOrientation.portraitDown,
      ]);
      return new MaterialApp(...);
    }
  }

Open ios/Runner/Info.plist and set the supported direction:

<array>
    <string>UIInterfaceOrientationPortrait</string>
</array>

Show/Hide Controls

Use Opacity

Opacity(
  opacity: .0,
  child: ,
)

perhaps

Visibility(
  visible: false,
  child: ,
)

perhaps

Offstage(
  offstage: true,
  child: ,
)

How to intercept Android's return key and process it

Use WillPopScope

@override
Widget build(BuildContext context) {
  return new WillPopScope(
    onWillPop: () async => false,
    child: new Scaffold(
      appBar: new AppBar(
        title: new Text("data"),
        leading: new IconButton(
          icon: new Icon(Icons.ac_unit),
          onPressed: () => Navigator.of(context).pop(),
        ),
      ),
    ),
  );
}

How to set the width of the RaisedButton control

ButtonTheme(
  minWidth: 200.0,
  height: 100.0,
  child: RaisedButton(
    onPressed: () {},
    child: Text("test"),
  ),
);

perhaps

SizedBox(
  width: 100, // specific value
  child: RaisedButton(...)
)

Set AppBar height

Using PreferredSize:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Example',
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(50.0), // here the desired height
          child: AppBar(
            // ...
          )
        ),
        body: // ...
      )
    );
  }
}

How to Format Time

The Dart API itself does not have an interface for formatting time, using intl:

import 'package:intl/intl.dart';

DateTime now = DateTime.now();
String formattedDate = DateFormat('yyyy-MM-dd – kk:mm').format(now);

Draw a set of controls through a List

Widget getTextWidgets(List<String> strings)
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < strings.length; i++){
        list.add(new Text(strings[i]));
    }
    return new Row(children: list);
  }

perhaps

Row(children: strings.map((item) => new Text(item)).toList())

perhaps

var list = ["one", "two", "three", "four"]; 

child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
             for(var item in list ) Text(item)
          ],
        ),    

How to set the height of components in GridView

Using childAspectRatio, set the following:

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<String> widgetList = ['A', 'B', 'C'];

  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;

    /*24 is for notification bar on Android*/
    final double itemHeight = (size.height - kToolbarHeight - 24) / 2;
    final double itemWidth = size.width / 2;

    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Container(
        child: new GridView.count(
          crossAxisCount: 2,
          childAspectRatio: (itemWidth / itemHeight),
          controller: new ScrollController(keepScrollOffset: false),
          shrinkWrap: true,
          scrollDirection: Axis.vertical,
          children: widgetList.map((String value) {
            return new Container(
              color: Colors.green,
              margin: new EdgeInsets.all(1.0),
              child: new Center(
                child: new Text(
                  value,
                  style: new TextStyle(
                    fontSize: 50.0,
                    color: Colors.white,
                  ),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

How to modify the status bar color

Use flutter_statusbarcolor

import 'package:flutter_statusbarcolor/flutter_statusbarcolor.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    FlutterStatusbarcolor.setStatusBarColor(Colors.white);
    return MaterialApp(
      title: app_title,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomePage(title: home_title),
    );
  }
}

perhaps

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
  statusBarColor: Colors.white
));

Column's child controls are centered at the bottom and left-aligned

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

Communication

Lao Meng Flutter blog address (nearly 200 control usages): http://laomengit.com

Welcome to the Flutter Exchange Group (WeChat: laomengit), Focus on Public Number (Lao Meng Flutter):