There are many types of widgets that include buttons in Flutter:

  • RaisedButton– Raised button with shadow
  • FlatButton– Flat button, no shadows
  • OutlineButton– The button with its own border cannot set the background colorcolor
  • MaterialButton– MD style button, which can set width and height values, is the base class for all the Flutter buttons
  • IconButton– inIconYou can’t set the background color or border with the click event
  • FloatingActionButton– Hover button
  • ButtonBarButton group
  • RawMaterialButtonHorizontal button group

MaterialButton

The MaterialButton is the base class of all the Button types in Flutter. The parameters of the MaterialButton are common to other buttons. Let’s take a look briefly:

  const MaterialButton({
    Key key, 
    @required this.onPressed, // Click the event, must give the value, write null to indicate that is not available
    this.onHighlightChanged, 
    
    this.textTheme, // The default text style
    this.textColor, // Text color
    this.disabledTextColor, // Time text color is not available
    
    this.color, / / the background color
    this.disabledColor, // The text color of the button when disabled
    this.highlightColor, // The color of the water ripple on the button, the color after the click, note that the color stays there after the click, not the instant display
    this.splashColor, // Wavy color
    this.colorBrightness, // Button theme is highlighted
    
    this.elevation, // The z-axis and the shadow should normally be less than 5
    this.highlightElevation, // The length of the shadow under the button when it is highlighted
    this.disabledElevation,
    
    this.padding,
    this.shape, // Button style
    this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.animationDuration,
    this.minWidth,
    this.height,
    this.child, // Button internal widget, usually text
  })
Copy the code

1. textThemeThe system provides the following color schemes by default:

  • ButtonTextTheme.normal:
  • ButtonTextTheme. Accent:
  • ButtonTextTheme. Primary:

2. shapeFour preset button shapes are provided:

  • BeveledRectangleBorder
  • CircleBorder
  • RoundedRectangleBorder
  • StadiumBorder

3. Icon when the button is pressed:

RaisedButton

RaisedButton – RaisedButton, with shadows

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "Float button",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        elevation: 10,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10))); }}Copy the code

FlatButton

FlatButton – FlatButton, without shadow, otherwise the same as RaisedButton

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FlatButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.blueAccent,
        child: Text(
          "Float button",
          style: TextStyle(fontSize: 30),
        ),
        textColor: Colors.white,
        disabledColor: Colors.grey,
        padding: EdgeInsets.all(20),
        splashColor: Colors.red,
        shape: BeveledRectangleBorder(
          borderRadius: BorderRadius.circular(10))); }}Copy the code

OutlineButton

OutlineButton – a button with a border that cannot set the background color

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new OutlineButton(
      onPressed: () {
        print(BorderStyle.values);
      },
      borderSide: BorderSide(
          color: Colors.blue,
          width: 2.0,
          style: BorderStyle.solid
      ),
      child: new Text('pressed')); }}Copy the code

MaterialButton

Materialbutton-md style button with the same properties as above, but the width and height can be set

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialButton(
      minWidth: 200,
      height: 80,
      color: Colors.blue,
      textColor: Colors.white,
      onPressed: () {
        print("AAAAAA");
      },
      child: new Text('button')); }}Copy the code

IconButton

IconButton – Add click event on the basis of Icon, can not set the background color and border, there is no need to put the image, child can accept Icon, can also accept RichText

class DD extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IconButton(
        onPressed: () {
          print("AAAAAA");
        },
        color: Colors.red,
        iconSize: 50,
        icon: new Icon(Icons.star),
        padding: const EdgeInsets.all(12.0)); }}Copy the code

FloatingActionButton

Basic setup

FloatingActionButton FloatingActionButton FloatingActionButton FloatingActionButton FloatingActionButton The Material design concept of FlatButton, this is the official guide, FloatingActionButton all typical application cases are included in this guide, although it is in English, but you can see the figure to know what is going on

I was just looking for a picture

  • childIt can be Text, icon, etc
  • tooltipLong according to the prompt
  • foregroundColorChild takes effect when no color is set
  • backgroundColorThe background color
  • elevationshadow
  • highlightElevationShadow when pressed
  • shapeShape. When shape is set, the default elevation will be invalidated and will default to CircleBorder
  • miniIs it a small icon or a large icon
  • heroTagHero effect uses the same tag. By default, the system will use the same tag for all FAB, which is convenient for animation effect
  • isExtendedWhether the type is Extended
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      child: Icon(Icons.adb),
      tooltip: "tips",
      backgroundColor: Colors.blueAccent,
      foregroundColor: Colors.amberAccent,
      onPressed: (){
        print("tips!"); }); }Copy the code

FloatingActionButton 3 styles

  • regular 大
  • mini 小
  • extendedextension

Regular and mini is the size of the button can switch by min true/false, but extended must use FloatingActionButton. Extended this special constructor, its style is the icon in the top, After the text, there is no child tag, but icon and label

FloatingActionButton Locate a problem

The android FloatingActionButton can be positioned, as can the Flutter, and even interact with the ActionBar at the top and the BottomNavigationBar at the bottom.

There are 6 positions:

  • General positioning:
    • endFloatSmall right Angle, some distance from the bottom
    • endDockedSmall right corner, shown against the bottom
    • centerFloatCenter to bottom, some distance from the bottom
  • Linkage positioning:
    • startTopTop left, some distance to the left, anchorActionBarIn the middle
    • endTopTop right, some distance to the right, anchorActionBarIn the middle
    • centerDockedCenter down to anchorBottomNavigationBarIn the middle

andBottomNavigationBarExample of linkage

return new Scaffold(
      floatingActionButton: new Builder(builder: (BuildContext context) {
        return new FloatingActionButton(
          child: const Icon(Icons.add),
          tooltip: "Hello",
          heroTag: null,
          foregroundColor: Colors.white,
          backgroundColor: Colors.black,
          elevation: 7.0,
          highlightElevation: 14.0,); }), floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, bottomNavigationBar:new Theme(
        data: Theme.of(context).copyWith(
            // sets the background color of the `BottomNavigationBar`
            canvasColor: Colors.black12,
            // sets the active color of the `BottomNavigationBar` if `Brightness` is light
            primaryColor: Colors.red,
            textTheme: Theme.of(context)
                .textTheme
                .copyWith(caption: new TextStyle(color: Colors.white))),
        child: new BottomNavigationBar(
          fixedColor: Colors.lightBlue,
          items: [
            new BottomNavigationBarItem(
                icon: new Icon(Icons.home), title: new Text("Dry goods of the Day")),
            new BottomNavigationBarItem(
              icon: new Icon(Icons.category),
              title: new Text("Reading by category"),),new BottomNavigationBarItem(
              icon: new Icon(Icons.whatshot),
              title: new Text("Creative writing"),),new BottomNavigationBarItem(
              icon: new Icon(Icons.search),
              title: new Text("Search"),
            ),
          ],
          type: BottomNavigationBarType.fixed,
          onTap: (intselected) { setState(() { }); },),),);Copy the code

ButtonBar

This is the easy one

  • alignmentLayout direction, default mainAxisalignment.end
  • mainAxisSizeSpindle size, default mainaxissize.max
  • children

RawMaterialButton

RawMaterialButton is a set of buttons that have no background, no borders and click effects. In fact, whether to write or not is fine, mainly to let everyone know, don’t think not seen