Baffling Flutter – FlatButton

As a front-end developer accustomed to HTML + CSS, learning flutter is a bit of a pain. Flutter is so hard to write pages. I encountered an inexplicable problem, which should be encountered later, so the article is named “Inexplicable Flutter” series.

To get straight to the point, I want to make a hover button that sticks to the bottom of the page. As the front end, fixed fixed. Okay, now start with flutter.

Create a new item with VS, directly stack stacks a positioned one, and FlatButton. I have to tease that flutter nesting is too deep. Then give a simple background color and see how it looks.

 @override
  Widget build(BuildContext context) {
    final size = MediaQuery.of(context).size;

    return Scaffold(
      body: Stack(
        alignment: Alignment.topCenter,
        children: <Widget>[
          ...
          Positioned(
            left: 0,
            bottom: 0,
            child: FlatButton(
              onPressed: () => {},
              child: Container(
                width: size.width,
                height: 50,
                alignment: Alignment.center,
                decoration: BoxDecoration(color: Colors.pink),
                child: Text(
                  "Button",
                  style: TextStyle(color: Colors.white, fontSize: 22),),),),),),); }Copy the code

Careful I, suddenly found that the left button is not aligned ah. How to return a responsibility, use absolute position for the first time, affirmation is absolute position is not familiar, where did not write right. Long search, no solution. Try Container disguised as a button. Look at the results:

. Positioned( left:0,
  bottom: 0,
  child: GestureDetector(
    onTap: () => {},
    child: Container(
      width: size.width,
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.pink),
      child: Text(
        "Button",
        style: TextStyle(color: Colors.white, fontSize: 22(), ((), ((), (()Copy the code

As expected, it was so good that I understood the reason for FlatButton. Think about it and see if the document is being used incorrectly. When YOU look at the document, it turns out to be padding. The default padding of FlatButton is 8. Solve crimes.

Padding is set to 0, and let’s see what happens.

. Positioned( left:0,
  bottom: 100,
  child: FlatButton(
    padding: EdgeInsets.all(0),
    onPressed: () => {},
    child: Container(
      width: size.width,
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.pink),
      child: Text(
        "Button :padding 0",
        style: TextStyle(color: Colors.white, fontSize: 22),
      ),
    ),
  ),
),
Positioned(
  left: 0,
  bottom: 0,
  child: FlatButton(
    onPressed: () => {},
    child: Container(
      width: size.width,
      height: 50,
      alignment: Alignment.center,
      decoration: BoxDecoration(color: Colors.pink),
      child: Text(
        "Button",
        style: TextStyle(color: Colors.white, fontSize: 22(), ((), ((), (()Copy the code

A very simple question, share, hope to help you.