“This is the sixth day of my participation in the Gwen Challenge in November. Check out the details: The Last Gwen Challenge in 2021.”

📝 [Flutter] learning to form a record, [programmer essential knowledge]

📔 — Fundamental components of Flutter [09] Button!

1. Write at the front

In the previous article, WE introduced the Material component BottomNavigationBar component of Flutter. Today, we will continue to learn the basic component of Flutter, the Button component.

  • 【 Basic Grammar 】

Dart uses var, final, and const

Dart Indicates the num of the data type

Dart String of data type

Dart data type list&Map

Dart method and arrow function

Dart’s method passes optional parameters and methods as parameters

Dart, Dart, Dart, Dart

Dart classes and objects in Flutter

Dart constructor of Flutter

Dart factory constructor & singleton & Initializer list

Dart class methods and object operators for Flutter

Inheritance of Flutter Dart

Dart abstract classes and interfaces in Flutter

Dart, Dart, Dart, Dart, Dart, Dart

  • [Collection of Basic Components]

The base component of Flutter [01] Text

[02] Container

[03] Scaffold

[04] Row/Column

The base component of Flutter [05] Image

Base Component [06] Icon of Flutter

Base component [07] Appbar

[08] BottomNavigationBar

2. The Button is introduced

2. 1 Common Button types

There are many Button components in Flutter. Common Button components include:

  • RaisedButton: RaisedButtonElevatedButton)
  • FlatButton: a FlatButton (deprecated in this version)TextButton)
  • OutlineButton: Wireframe button (changed toOutlinedButton)
  • IconButton: IconButton
  • ButtonBar: button group
  • FloatingActionButton: Float button

2.2 Button common attributes

Button components have the following common properties:

  • OnPressed: Mandatory argument, the callback that is triggered when the button is pressed, receives a method, passing NULL to indicate that the button is disabled, and displays the disabled style
  • Child: Widgets can be placed
  • TextColor: textColor
  • Color: text color
  • DisabledColor: Color of the disabled button
  • DisabledTextColor: Text color when the button is disabled
  • SplashColor: The color of the water ripple when the button is clicked
  • HighlightColor: The color of the button after it is clicked (long pressed)
  • Elevation: The range of shadows. A higher value increases the range of shadows
  • Padding: Inside margin
  • Shape: Sets the shape of a button

2.3 Code Examples

2.3.1 TextButton

  • TextButton

Textbuttons, as the name suggests, are text buttons that are commonly used in toolbars, In Dialogs, and other content embedded together. Text buttons have no visible borders, so they must rely on their position relative to other content to get context.

Container(
                  color: Colors.orange,
                  child: TextButton(
                    onPressed: () {
                      print("TextButton");
                    },
                    child: Text('TextButton')))Copy the code
  • TextButton and FlatButton

2.3.2 ElevatedButton

Use raised buttons to add dimensions to a layout that would otherwise be mostly flat, such as in a long, busy list of content, or in an expansive space. Avoid using raised buttons on already raised content such as dialogs or cards.

ElevatedButton(
                  child: Text('ElevatedButton'),
                  onPressed: () {
                    print("ElevatedButton"); },),Copy the code

2.3.3 ButtonBar

ButtonBar, which can put multiple buttons, ButtonBar can do unified style processing for the buttons inside.

Container(
            color: Colors.yellow,
            width: 450,
            child: ButtonBar(
              buttonPadding: EdgeInsets.all(5),
              buttonHeight: 30,
              alignment: MainAxisAlignment.spaceBetween,
              buttonTextTheme: ButtonTextTheme.primary,
              layoutBehavior: ButtonBarLayoutBehavior.padded,
              children: [
                ElevatedButton(
                  child: Text('ElevatedButton'),
                  onPressed: () {
                    print("ElevatedButton");
                  },
                ),
                RaisedButton(
                  child: Text('RaisedButton1'),
                  onPressed: () {
                    print("RaisedButton1");
                  },
                ),
                RaisedButton(
                  child: Text('RaisedButton2'),
                  onPressed: () {
                    print("RaisedButton2"); },),],),)Copy the code

2.3.4 OutlinedButton

A Material Design “Outlined Button” is essentially a TextButton with an outline frame.

  • OutlineButton and OutlinedButton code run effect comparison

2.3.5 FloatingActionButton

A Material Design float button. The float action button is a circular icon button that hovers over content to promote the main action in the application. The floating action button the most commonly used [Scaffold floatingActionButton] scene.

FloatingActionButton Specifies the heroTag if there are more than one

Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,/ / the main shaft
            crossAxisAlignment: CrossAxisAlignment.center,/ / cross shaft
            textBaseline: TextBaseline.alphabetic,// Text alignment
            children: [
              Center(
                child: FloatingActionButton(
                    child: Text('111111Button333'),
                    onPressed: () {
                      print("FloatingActionButton");
                    }),
              ),
              Center(
                child: FloatingActionButton(
                    heroTag: '2',
                    child: Icon(Icons.access_alarm_rounded),
                    onPressed: () {
                      print("FloatingActionButton2"); }),),,)Copy the code
  • FloatingActionButton code runs the effect

2.3.6 IconButton

An IconButton is a material design IconButton. An IconButton is an image printed on a [material] widget that responds to touch by filling it with color.

Iconbuttons are commonly used in [appbar.Actions] scenarios, but they can also be used in many other places.

  • Code to run the IconButton effect

2.3.7 rounded Button

RaisedButton is used as an example. In fact, these buttons are similar, but each has a unique initialization attribute. For example, RaisedButton comes with rounded corners, water ripple effects, and shadows.

  • Cut the rounded

In addition to the rounded corner button, we also need to use rounded corners. For example, how to cut a Container into rounded corners? This can be done with decoration as follows:

Center(
            child: Container(
              width: 100,
              height: 70,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(20),
                  color: Colors.orange
              ),
              child: Text('I am the word',style: TextStyle(fontSize: 14),textAlign:TextAlign.center,),
            ),
          )
Copy the code
  • The effect is as follows:

3. Write in the back

Follow me, more content continues to output

  • CSDN
  • The Denver nuggets
  • Jane’s book

🌹 if you like, give it a thumbs up 👍🌹

🌹 feel harvest, can come to a wave of collection + attention, so as not to find you next time I 😁🌹

🌹 welcome everyone to leave a message exchange, criticism and correction, forwarding please indicate the source, thank you for your support! 🌹