CODEWITHSUNDEEP
flutterdart
Was Ash
Was Ash

Reputation: 43

How can i make flat button size as it's child size

i want to make button size like it's text child size i will attach example photo , and i'll attach the code that i write

this is my code :

        Expanded(
        child: FlatButton(
          minWidth: double.infinity,
          height: 20,
          child: FlatButton(
            onPressed: (){},
            color: Colors.grey,
           shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(10) ,
            ),
            child: Text(
              'SHOP' ,
              style: TextStyle(
                color: Colors.blueAccent,
                fontWeight: FontWeight.bold ,
                fontSize: 16 ,
              ),

and this is the photo photo

Upvotes: 1

Views: 886

Answers (4)

Yuu Woods
Yuu Woods

Reputation: 1348

How about this?

RawMaterialButton(
  constraints: BoxConstraints(),
  padding: EdgeInsets.fromLTRB(14, 4, 14, 4),
  elevation: 0,
  onPressed: () {},
  fillColor: Color(0xFFF2F2F2),
  shape: StadiumBorder(),
  child: Text(
    'SHOP',
    style: TextStyle(
      color: Colors.blueAccent,
      fontWeight: FontWeight.bold,
      fontSize: 16,
    ),
  ),
),

button sample

Upvotes: 2

Naveen Avidi
Naveen Avidi

Reputation: 3073

Try this for button function:

Expanded(
//Modify below factor as your requirement
  flex: 1,
  child: InkWell(
      onTap: () {},
      child: Container(
      alignment: Alignment.center,
//Modify width,height as your requirement
      height: double.infinity,
      width:double.infinity,
      decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      color: Colors.blueAccent.withAlpha(30),
        ),
     child: Text('SHOP',
           style: TextStyle(
           color: Colors.blue,
           fontWeight: FontWeight.bold,
           fontSize: 20)),
          ),
        )),

Upvotes: 0

Zero Live
Zero Live

Reputation: 1843

GestureDetector{
onTap:(){},
child:Container(
child:Material(
shape:RoundRectangleBorder()
child:Center(
child:'Text')))
}

You can use properties of Material widget this way. If you don't provide height to container it will adjust to the child size. i.e. text size

Upvotes: 0

drogel
drogel

Reputation: 2717

Your question is confusing to me, I am not sure whether you want your button as big as the parent's child (as you stated in the title), or if you want it as big as the Text child (as you stated in the description of your question).

If what you want is the button to be as big as the parent, consider using LayoutBuilder and SizedBox to make the button as big as the available surrounding space. You can do something like this:

  LayoutBuilder(
    builder: (context, constraints) {
      return SizedBox(
        height: constraints.maxHeight,
        width: constraints.maxWidth,
        child: FlatButton(
          ...
        )
      )
    }
  )

If you want the button to be as big as its child, I believe you don't need to worry about anything other than providing the proper Text widget. FlatButton will figure out its size accordingly.

Upvotes: 0

Related Questions