This is the 16th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Xiao CAI took a long time to build a simple [login] page two days ago, but there are still a lot of places to optimize, xiao CAI spent a long time to try to do a little bit of optimization, only for the optimized part of the simple arrangement.

Step 4: Solve the problem of overlearning text boxes

  1. When xiaogai first edited the content block, he thought there were only a few widget elements involved and would not take up more than the screen, so the root widget used the body: New Container(), but when you click TextField, the pop-up keyboard will block some widgets and prompt “Bottom OverFlowed By 85 Pixels”, as shown in the figure:

2. Check the official website and adjust the root widget tobody: new ListView().FlutterThe ListView in not only stands for ListView/RecycleView, but also stands for a ScrollView, as shown in the figure below:

Optimization 2: Add the “Clear Data” icon at the end of the TextField

Method 1: Use Stack layer layout, add a “Clear data” icon on the next layer of the input TextField;
New Padding(Padding: new EdgeInsets. FromLTRB (20.0, 0.0, 20.0, 15.0), child: new Stack(alignment: New Alignment(1.0, 1.0), //statck children: <Widget>[new Row(mainAxisAlignment: MainAxisAlignment spaceEvenly, children: [new Padding (Padding: new EdgeInsets fromLTRB (0.0, 0.0, 5.0, 0.0), the child: New image. asset('images/icon_username. PNG ', width: 40.0, height: 40.0, fit: boxfit.fill,), new Expanded(child: new TextField( controller: _phonecontroller, keyboardType: TextInputType.phone, decoration: New InputDecoration(hintText: 'insert user name ',),),),]), new IconButton(icon: new icon (Icons. Clear, color: Colors.black45), onPressed: () { _phonecontroller.clear(); }, ), ], ), ),Copy the code
Method 2: Use the attributes of the TextField [suffixIcon]. The TextField provides many convenient attributes, such as: [prefixIcon] [icon before the text box];
new Expanded( child: new TextField( controller: _pwdcontroller, decoration: new InputDecoration( hintText: SuffixIcon: new IconButton(icon: new icon (Icons. Clear, color: colors.black45), onPressed: () { _pwdcontroller.clear(); }, ), ), obscureText: true, ), ),Copy the code

Tips: I prefer method 2. Method 1 uses a layer layout. If you go beyond the icon location, the input will be blocked by the icon if you don’t do anything special, and it uses more widgets than method 2. In order to test, the [input user name] module uses method 1, [input password] module uses method 2.

Optimization 3: adjust the keyboard pop-up style

Set the keyboardType in the TextField: TextInputType. Phone, Flutter offers a variety of pop-up keyboard: text/datetime/phone/url/number/multiline/emailAddress…

Optimization 4: Add “warm prompt” dialog box according to the input text box

Flutter for creating and displaying the function of the pop-up dialog box, such as: showDialog/showMenu/showModalBottomSheet, side USES a dialog box, can set the title/content/button and so on various properties. If you click around a dialog box, the window will not be closed, or transmissible: false. If true, click around the dialog box and the dialog box closes automatically.

Related note

Flutter provides many handy little ICONS, which are very easy to use. I found several similar ICONS for just one small [*]. I hope you can try them out more. As shown in figure:

The main source

import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( title: Theme: new ThemeData(primarySwatch: color.blue,), home: new MyHomePage(title: 'quick login '),); } } 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> { bool _phoneState, _pwdState = false; String _checkStr; TextEditingController _phonecontroller = new TextEditingController(); TextEditingController _pwdcontroller = new TextEditingController(); void _checkPhone() { if (_phonecontroller.text.isNotEmpty && _phonecontroller.text.trim().length == 11) { _phoneState = true; } else { _phoneState = false; } } void _checkPwd() { if (_pwdcontroller.text.isNotEmpty && _pwdcontroller.text.trim().length >= 6 && _pwdcontroller.text.trim().length <= 10) { _pwdState = true; } else { _pwdState = false; }} @override Widget build(BuildContext context) {return new MaterialApp(title: 'light check ', home: new Scaffold(appBar: New AppBar(title: new Text(' quick login '),), body: new ListView(children: <Widget>[new Column(mainAxisSize: MainAxisSize.max, mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[ new Padding( padding: New EdgeInsets. All (30.0), child: new image. asset('images/ic_launcher. PNG ', scale: 1.2,)), new Padding(Padding: New EdgeInsets. FromLTRB (20.0, 0.0, 20.0, 15.0), child: new Stack(alignment: New Alignment(1.0, 1.0), //statck children: <Widget>[new Row(mainAxisAlignment: MainAxisAlignment spaceEvenly, children: [new Padding (Padding: new EdgeInsets fromLTRB (0.0, 0.0, 5.0, 0.0), the child: New image. asset('images/icon_username. PNG ', width: 40.0, height: 40.0, fit: boxfit.fill,), new Expanded(child: new TextField( controller: _phonecontroller, keyboardType: TextInputType.phone, decoration: New InputDecoration(hintText: 'insert user name ',),),),]), new IconButton(icon: new icon (Icons. Clear, color: Colors.black45), onPressed: () { _phonecontroller.clear(); }, ), ], ), ), new Padding( padding: New EdgeInsets. FromLTRB (20.0, 15.0, 20.0, 40.0), child: new Row(mainAxisAlignment: MainAxisAlignment spaceEvenly, children: [new Padding (Padding: new EdgeInsets fromLTRB (0.0, 0.0, 5.0, 0.0), the child: New image. asset('images/icon_password.png', width: 40.0, height: 40.0, fit: boxfit.fill,), new Expanded(child: New TextField(Controller: _pwdController, decoration: new InputDecoration(hintText: 'Please input password ', suffixIcon: new IconButton( icon: new Icon(Icons.clear, color: Colors.black45), onPressed: () {_pwdController.clear ();},),), obscureText: true,),),), new Container(width: 340.0, child: New Card(color: Colors. Blue, elevation: 16.0, Child: new FlatButton(Child: new Padding(Padding: New EdgeInsets. All (10.0), child: new Text(' ζ–° ι€Ÿ δΈ­ ', style: new TextStyle(color: Colors. White, fontSize: 16.0),),), onPressed: () {_checkPhone(); _checkPwd(); if (_phoneState && _pwdState) {_checkStr = ' ';} else {if (!_phoneState) {_checkStr = 'Please enter 11-digit mobile phone number! ';} else if (!_pwdState) {_checkStr =' Please enter 6-10-digit password! '; } } print(_checkStr); showDialog<Null>( context: context, barrierDismissible: false, child: new AlertDialog( title: New Text(' warm prompt ', style: new TextStyle(color: color.black54, fontSize: 18.0,), content: new Text(_checkStr), actions: <Widget>[ new FlatButton( onPressed: () { Navigator.pop(context); }, child: New Text () confirmation),,,);},),),),),),),),),); }}Copy the code

Β Β Β Β Β Β GitHub Demo

The small dish is also new to Flutter. There are still many unclear and ununderstood aspects about Flutter. I hope to point out more if there are wrong aspects.

Source: Little Monk A Ce