Mr. Meng: The Stack Overflow Flutter Question - Issue 1, which was shared a month ago, is liked by many friends. Thank you for your support. There is a link to the first issue at the end of the article. I hope this article will help you.
No connected devices
It is estimated that most of this problem has been encountered, and the solutions are as follows:
-
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.
-
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.
-
Open Android Studio and view the connected phone:
-
If you still can't connect to your phone, open the Android Studio setup interface:
Select the most recent API.
-
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:
-
Use FlatButton and RaisedButton
shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), side: BorderSide(color: Colors.red) ),
-
Using ClipRRect
ClipRRect( borderRadius: BorderRadius.circular(40), child: RaisedButton( onPressed: () {}, child: Text("Button"), ), )
-
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
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):
![]() |
![]() |