preface

In the previous articles, you have had a preliminary understanding of the construction of the Flutter environment, the development language used, and some of the principles of drawing. This is a practical article. The FIRST step in the development of Flutter application is to develop the UI interface. Widgets can be thought of as UI controls and UI layout controls in our native development. Such as iOS UILabel, UIButton, UITableView, Android Button, TextView, ListView and so on. Here are some common ways to use widgets.

Common Widgets

The text control

Text controls are the most commonly used controls in daily development. Flutter provides two text controls for our use. The following describes some of the commonly used properties of Flutter.

Text
Text(
  'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.', textAlign: textalign.center, // Text alignment), Text('Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.',
  softWrap: false, / /trueWill automatically wrap processing;falseIs judged to have infinite horizontal space, no line breaks), Text('Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.', maxLines: 1, // maxLines: 1, // maxLines: 1, // maxLines: 1, // maxLines: 1, // maxLines: 1, // maxLines: 1, //'Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.', overflow: textoverflow. ellipsis, // Overflow processing, where ellipsis sets excess content to...) , Text('Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.', style: TextStyle(// TextStyle color: Colors. Red, // text color: 14, // fontSize: fontWeight: W600, fontStyle: fontstyle. normal, // letterSpacing: 2, // 4, // blurRadius: blurRadius: blurRadius: blurRadius: blurRadius: blurRadius: blurRadius: blurRadius: blurRadius: blurRadius 5)], // shadow),), Text('Flutter allows you to build beautiful native apps on iOS and Android from a single codebase.', style: TextStyle (decoration: TextDecoration. Underline, / / text decoration, set the underline decorationColor here: Colors. Blue, / / text decoration color decorationStyle: TextDecorationStyle. Dotted, / / text decoration style),),Copy the code

The display effect is shown as follows:

RichText

Rich text control, you can set a continuous text style, the actual combat is more common.

RichText(
  text: TextSpan(
    text: 'Flutter',
    style: TextStyle(color: Colors.black),
    children: <TextSpan>[
      TextSpan(
        text: ' allows you',
        style: TextStyle(
          color: Colors.green,
          decoration: TextDecoration.underline,
          decorationStyle: TextDecorationStyle.solid,
        ),
      ),
      TextSpan(
        text: ' to build beautiful native apps',
        style: TextStyle(
          fontSize: 18,
        )
      ),
      TextSpan(
        text: ' on iOS and Android',
        style: TextStyle(
          fontWeight: FontWeight.bold,
        )
      ),
      TextSpan(
          text: ' from a single codebase.',
          style: TextStyle(
            shadows: [Shadow(color: Colors.black38, offset: Offset(3, 3))],
          )
      ),
    ],
  ),
)
Copy the code

The display effect is shown as follows:

The image control

Image
Image.asset(
  'images/flutter_logo.png', // Image resource path), image.asset ('images/flutter_logo.png', width: 100, // Image width: 100, // Image height: 100, // Image height: 100, // Image height: 100, // Image height: 100'images/flutter_logo.png', color: color. red, // Mix the color with colorBlendMode: Blendmode. overlay, // color and Image overlay, powerful, see official documentation or source code for other modes), Image.'images/flutter_logo.png', width: 200, height: 200, repeat: ImageRepeat. Repeat, // Repeat the image within the width and height until it is full)Copy the code

The display effect is shown as follows:

In addition to the image.asset () constructor used above, there are other named constructors for Image such as image.file (), Image.network(), and image.memory ().

  • Image.file

To use this method, You need to apply for the android.permission.READ_EXTERNAL_STORAGE permission.

  • Image.net Work loads web images through urls.

  • Image. Memory loads images in memory using the Uint8List object.

Icon
Icon(icon.adb,), Icon(icon.adb, size: 50, // Icon size), Icon(icon.adb, color: color.red, // Icon color)Copy the code

The display effect is shown as follows:

The button control

There are two styles of Button controls in Flutter: Android Material Design style and iOS Cupertino style.

RaisedButton
RaisedButton(onPressed: null, // onPressed null is considered unclickable disabledTextColor: colors. grey, // Unclickable text color disabledColor: Color.blue, // disabledElevation: 5, // Layer height when not clickable child: Text('Disabled Button'),), RaisedButton(onPressed: () {// onPressed is not null and is considered clickableprint('You click the button'); }, textColor: colors.white, // textColor: colors.blueaccent, // button color highlightColor: LightBlue, // Click the button to highlight the color elevation: 5, // click the button to highlight the layer elevation: 8, // click the button to highlight the layer height animationDuration: Duration(milliseconds: 300), // Child: Text('ClickButton'),Copy the code

The display effect is shown as follows:

CupertinoButton
CupertinoButton(
  child: Text('Click'), disabledColor: colors.blueGrey, // Cannot be clicked when button color, color property is not set the value is disabled onPressed: Null, // onPressed to null as unclickable, CupertinoButton(child: Text('Click'), color: color.lightBlue, disabledColor: color.blueGrey, // Cannot be clicked when button color, color property is not set this value is disabled onPressed: Null, // onPressed to null as unclickable, CupertinoButton(child: Text('Click'), color: color.lightblue, // Button color borderRadius: Borderradio.all (radio.circular (15.0)), // button rounded corner set onPressed: () {// onPressed is not null and is considered clickableprint('You click the button'); },)Copy the code

The display effect is shown as follows:

Input control

There are also two types of input controls, namely TextField in Material Design style and Cupertino style.

TextField
TextField(
  controller: TextEditingController(text: 'Hello Flutter'), // default input content), TextField(decoration: InputDecoration(// input box decoration hintText:'please input something', contentPadding: edgeinset.all (10), // input box contentPadding),), TextField(decoration: InputDecoration(labelText:'Nickname'TextStyle(color: colors.black, fontWeight: fontweight.bold), // label TextStyle hintText:'please input nickname', // Input prompt helperText:'nickname 'contains uppercase and lowercase letters, digits, and underscores, and cannot contain special characters., // Help tip text),), TextField(decoration: InputDecoration(labelText:'Password'TextStyle(color: colors.black, fontWeight: fontweight.bold), // label TextStyle hintText:'please input password', // Enter the prompt errorText:'Password entered incorrectly'// Error message prefixIcon: Icon(Icons. Security), // input box prefix Icons),)Copy the code

The display effect is shown as follows:

CupertinoTextField
CupertinoTextField(
  controller: TextEditingController(text: 'Hello Flutter'), // Default input content), CupertinoTextField(placeholder:'please input something', // Input text: EdgeInsets. Only (left: 10, right: 10), CupertinoTextField(placeholder: placeholder)'please input something'LightBlue, // Color: border: border. All (color: RGB (50, 50, 50)) Color.red, width: 1), // Input box borderRadius: borderradius.all (radius.circular (10)), [BoxShadow(color: Colors. RedAccent, offset: offset (0, 5))], // BoxDecoration(// text BoxDecoration image: DecorationImage(// text BoxDecoration background image: AssetImage('images/flutter_logo.png'),
repeat: ImageRepeat.repeat,
      )
  ),
),
CupertinoTextField(
  placeholder: 'please input something', // Enter the prompt prefix: Text('Username :'), // Input box prefix text), CupertinoTextField(placeholder:'please input something', // input the prompt prefix: Icon(Icons. Security), // input the box prefix text enabled:false, // editable)Copy the code

The display effect is shown as follows:

TextField and CupertinoTextField have different property Settings. So if you want to develop UI for iOS and Android phones, you should use different widgets to implement different styles of Widget properties. Please refer to the official documentation or source code for other attributes.

Select control

Selection controls include Material The Design style of the Checkbox, Radio, the Switch, the Slider and Cupertino style CupertinoSwitch, CupertinoSlider, CupertinoSegmentedControl, etc.

Checkbox
Checkbox(
  value: true,
  onChanged: null,
  tristate: true,), Checkbox(value: null, // tristate must be nulltrue(checked) {}, activeColor: Colors. RedAccent, // checkbox tristate:trueCheckbox(value:false, // Unchecked state onChanged: (checked) {}, activeColor: Colors. RedAccent, // CheckBox tristate:falseCheckbox(value:true, // Select onChanged: (checked) {}, activeColor: Colors. RedAccent, // Checkbox tristate:falseCheckbox(value: isChecked, // control state value onChanged: (checked) {print("checked = $checked");
    setState(() {// If the State changes, passsetState Refresh Widget changes State this.isChecked = checked; }); }, tristate:true, // Whether there are three states activeColor: Colors. BlueAccent, // checkbox color)Copy the code

The display effect is shown as follows:

Radio
String _character = 'A';

Radio<String>(
  value: 'A'GroupValue: _character, // The selected value of the current radio group will be selected if the value matches the value onChanged: (String newValue) {setState(() {// Update the State when the current control is clicked _character = newValue; }); }, ), Radio<String>( value:'B',
  groupValue: _character,
  onChanged: (String newValue) {
    setState(() {
      _character = newValue;
    });
  },
),
Radio<String>(
  value: 'C',
  groupValue: _character,
  onChanged: (String newValue) {
    setState(() { _character = newValue; }); },)Copy the code

The display effect is shown as follows:

Switch
bool _switchChecked = true;

Switch(
  value: true, activeColor: Colors. BlueAccent, // activeTrackColor: Colors. LightBlue, // activeTrackColor: Colors. Null, // if null, the Switch cannot operate), Switch(value:true, activeColor: Colors. BlueAccent, // activeTrackColor: Colors. LightBlue, // activeTrackColor: Colors. (flag) {}, // If null, the Switch cannot operate), Switch(value:false, inactiveThumbColor: color. white, // inactiveThumbColor: color. grey, // inactiveThumbColor: color. grey, // inactiveThumbColor: color. grey, // inactiveThumbColor: color. grey (flag) {}, ), Switch( value: _switchChecked, onChanged: (flag) {setState(() {// State changes are passedsetState State value _switchChecked = flag; }); },)Copy the code

The display effect is shown as follows:

Slider
Double _sliderValue = 0.3; Slider(value: _sliderValue, // The value to which the current Slider is located onChanged: (val) {// Slide listenersetState(() {// passsetState Sets the current value _sliderValue = val; }); }, onChangeStart: (val) {// Start slider listenerprint('changeStart: val = $val'); }, onChangeEnd: (val) {// Listen at the end of the slideprint('changeEnd: val = $val'); }, min: 0, // min: 0 Max: 1, // Max activeColor: Colors. BlueAccent, // Colors. LightBlueAccent, // unreached Colors)Copy the code

The display effect is shown as follows:

CupertinoSwitch
bool _switchChecked = true;

CupertinoSwitch(
  value: true, // Switch value), CupertinoSwitch(value:false,
),
CupertinoSwitch(
  value: _switchChecked,
  onChanged: (flag) {
    setState(() {// State changes are passedsetState State value _switchChecked = flag; }); },)Copy the code

The display effect is shown as follows:

CupertinoSlider
CupertinoSlider(value: _sliderValue, onChanged: (val) {// Slide listenersetState(() {// passsetState Sets the current value _sliderValue = val; }); }, onChangeStart: (val) {// Start slider listenerprint('changeStart: val = $val'); }, onChangeEnd: (val) {// Listen at the end of the slideprint('changeEnd: val = $val'); }, min: 0, // min: 0, // Max: 1, // Max: activeColor: color.red, // slide color)Copy the code

The display effect is shown as follows:

CupertinoSegmentedControl
Map<String, Text> map = {'apple': Text('Apple'), 'orange': Text('Orange'), 'banana': Text('Banana')};
String _fruit = 'apple'; CupertinoSegmentedControl (children: map, / / data groupValue: _fruit, / / selected data onValueChanged: (fruit) {setState(() {// Pass when data changessetState changes the selected State _fruit = fruit; }); }, unselectedColor: CupertinoColors. White, / / not selected color selectedColor: CupertinoColors. ActiveBlue, / / selected color borderColor: CupertinoColors activeBlue, / / border Color pressedColor: const Color (0 x33007aff), / / when click on the Color)Copy the code

The display effect is shown as follows:

conclusion

The common properties of some common widgets are described in detail above. Other common widgets will be shared later.

Note: This article is reprinted from the corresponding “Flutter Programming Guide” wechat official account. For more Flutter related technical articles, please follow the wechat official account.