如何为 Flutter 中的 OutlineButton 制作带下划线的边框

Question

I'm trying to create a button that will display a colored border underneath my image, but only on the bottom side. In OutlineButton it only lets me change the whole border, and not one side of it. Can anyone help me! I need it to be a button because I'm using onPressed(){} to perform my color changing from Colors.transparent to Colors.teal when the user presses the image. Thanks!

Answer 1

You can simply define the shape property on the FlatButton using Border() .

FlatButton(
  height: 50,
  child: Text('All Posts'),
  shape: Border(
    bottom: BorderSide(color: Colors.black, width: 3)
  ),
  onPressed: (){
    print('You selected all posts');
  },
),

Answer 2

Fixed it. I changed it to a flatbutton and wrapped the widget in a Material() This allowed me to create a bottom BorderSide, setting it to my color preferences:

bool changeColor = false;

Material(
    shape: Border(
        bottom: BorderSide(
            color: changeColor ? Colors.teal : Colors.transparent, width: 3.0
        )
    ),
    child: FlatButton(
        onPressed: (){
            setState(() {changeColor = !changeColor;});
        },
    ),
),