Create widget in flutter

Question

I'm trying to create this widget here

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

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 )),
            ],
          ),
        ),
      );
    },

  ),
)

Answer 1

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.

Answer 2

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)),
                    ],
                  ),
                ),
              );
            },
          ),
        ),