Question 356200 in Flutter Question posted in
The official Flutter documentation can be found here.

Create widget in flutter

I’m trying to create this widget here

enter image description here

This is the result I got, I’m having trouble limiting the size of the widget without decreasing the text

enter image description here

SizedBox(
  height: 90,
  width: double.infinity,
  child: ListView.builder(
    itemCount: 10,
    shrinkWrap: true,
    padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 15),
    scrollDirection: Axis.horizontal,
    itemBuilder: (BuildContext context, int index){
      return Container(
        height: 80,
        width: 78,
        padding: const EdgeInsets.only(right: 11),
        alignment: Alignment.center,
        child: OutlinedButton(
          onPressed: () {

          },
          style: OutlinedButton.styleFrom(
            backgroundColor: Colors.black,
            side: const BorderSide(color: Colors.cyan, width: 1),

          ),
          child: const Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: <Widget>[
              Text("SEG", style: TextStyle(color: Colors.white,fontSize: 10 )),
              Text("20", style: TextStyle(color: Colors.white,fontSize: 10 )),
            ],
          ),
        ),
      );
    },

  ),
)
Tags:

2

Answers


  1. 0

    I’m trying to figure out what your problem really is, but there’s no relation between the text size and the size of the widget which contains the text.

    text size is applied based on what you have already set, if not, the default is applied.

    and btw, you are setting a padding for the Container‘s child : padding: const EdgeInsets.only(right: 11).

    you have made it work look like a margin, it’s ok, but recommended to use margin property instead.

    Hope it helps you.

    Login or Signup to reply.
  2. 0

    Modified the code you provided, Now you can get the result you are expecting.

    
SizedBox(
          height: 90,
          width: double.infinity,
          child: ListView.builder(
            itemCount: 10,
            shrinkWrap: true,
            padding: const EdgeInsets.symmetric(vertical: 0, horizontal: 15),
            scrollDirection: Axis.horizontal,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                height: 80,
                width: 78,
                alignment: Alignment.center,
                child: OutlinedButton(
                  onPressed: () {},
                  style: OutlinedButton.styleFrom(
                    backgroundColor: Colors.black,
                    side: const BorderSide(color: Colors.cyan, width: 1),
                  ),
                  child: const Column(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Text("SEG",
                          style: TextStyle(color: Colors.white, fontSize: 16)),
                      Text("20",
                          style: TextStyle(color: Colors.white, fontSize: 16)),
                    ],
                  ),
                ),
              );
            },
          ),
        ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search