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

how to set even size for all single and multi digit text in container? – Flutter

In flutter,
enter image description here
i need set even container size for all single and multi digit text in container…

container widget code

Widget cirbtn(String btntext,){

    return GestureDetector(
      onTap: (){},
      child: Container(
        margin: const EdgeInsets.all(10),
        padding: const EdgeInsets.all(5),
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.cyan,),

        child: Text(btntext,style: const TextStyle(
          fontSize: 20,
        )
        ),
      ),
    );
  }

full code

import 'package:flutter/material.dart';


void main()=>runApp( MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHome(),
    );
  }
}



class MyHome extends StatefulWidget {
  const MyHome({Key? key,}) : super(key: key);
  @override
  State<MyHome> createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> {

  Widget cirbtn(String btntext,){

    return GestureDetector(
      onTap: (){},
      child: Container(
        margin: const EdgeInsets.all(10),
        padding: const EdgeInsets.all(5),
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.cyan,),

        child: Text(btntext,style: const TextStyle(
          fontSize: 20,
        )
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(
          child: Text("NAVEEN'S PROJECT"),
        ),
      ),
      body:Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,

        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("1"),
              cirbtn("2"),
              cirbtn("3"),
              cirbtn("4"),
              cirbtn("5"),
              cirbtn("6"),
              cirbtn("7"),

            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("8"),
              cirbtn("9"),
              cirbtn("10"),
              cirbtn("11"),
              cirbtn("12"),
              cirbtn("13"),
              cirbtn("14"),

            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("15"),
              cirbtn("16"),
              cirbtn("17"),
              cirbtn("18"),
              cirbtn("19"),
              cirbtn("20"),
              cirbtn("21"),

            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("22"),
              cirbtn("23"),
              cirbtn("24"),
              cirbtn("25"),
              cirbtn("26"),
              cirbtn("27"),
              cirbtn("28"),

            ],
          ),
          Row(
           // mainAxisAlignment: MainAxisAlignment.start,
            //mainAxisSize: MainAxisSize.min,
            children: [
              cirbtn("29"),
              cirbtn("30"),
              cirbtn("31"),

            ],
          ),

        ],
      ),

    );
  }
}

i need set even container size for all single and multi digit text in container…

Tags:

2

Answers


  1. 0

    You can give fixed height and width to container instead of Padding:

    Widget cirbtn(String btntext,){

    return GestureDetector(
      onTap: (){},
      child: Container(
        margin: const EdgeInsets.all(10),
      height:15,
      width:15,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.cyan,),

        child: Text(btntext,style: const TextStyle(
          fontSize: 20,
        )
        ),
      ),
    );
  }
    Login or Signup to reply.
  2. 0

    There are multiple ways you can set you can set even container size for all the container by the following ways.

    1. Using Expanded or Flexible

    Expanded Widget documentation: https://api.flutter.dev/flutter/widgets/Expanded-class.html

    Expanded Widget demonstration: https://youtu.be/_rnZaagadyo

    Flexible Widget documentation: https://api.flutter.dev/flutter/widgets/Flexible-class.html

    Flexible Widget demonstration: https://youtu.be/CI7x0mAZiY0

    For your case it can be either Expanded or Flexible. Depends on your actual design and your plan. You need to play around with Expanded and Flexible so that you can get clear understanding. For now I have written the snippet using Expanded. For adjusting the space, you can check the widget named Spacer

    Spacer widget documentation: https://api.flutter.dev/flutter/widgets/Spacer-class.html

    Spacer Widget demonstration: https://youtu.be/7FJgd7QN1zI

    Note: I did not adjust the spacing since I am not sure how your design is exactly gonna look but my goal is to give you clear understanding regarding the concept of design responsiveness.

    Widget cirbtn(
    String btntext,
  ) {
    return Expanded(
      child: GestureDetector(
        onTap: () {},
        child: Container(
          //margin: const EdgeInsets.all(10),
          padding: const EdgeInsets.all(15),
          decoration: const BoxDecoration(
            shape: BoxShape.circle,
            color: Colors.cyan,
          ),
          child: Center(
            child: Text(btntext,
                style: const TextStyle(
                  fontSize: 20,
                )),
          ),
        ),
      ),
    );
  }

    There are many times people are confused when to use Flexible and Expanded. Therefore I have also attached another tutorial so that you can get better understanding of the differences and the use cases.

    Expanded vs Flexible Demo link: https://youtu.be/ruqMR5htic4

    1. Using fixed height and width

    You can simply use constant values for width and height which is given in the below snippet

    Widget cirbtn(
    String btntext,
  ) {
    
    return GestureDetector(
      onTap: () {},
      child: Container(
        //margin: const EdgeInsets.all(10),
        padding: const EdgeInsets.all(15),
        width: 56,
        decoration: const BoxDecoration(
          shape: BoxShape.circle,
          color: Colors.cyan,
        ),
        child: Center(
          child: Text(btntext,
              style: const TextStyle(
                fontSize: 20,
              )),
        ),
      ),
    );
  }

    Drawbacks of using fixed width or height

    • You will end up facing A RenderFlex overflowed by [pixelInteger] pixels on the right.
    • You are going to face issue in other devices even though you have adjusted the height or width.

    The reason why you are going to face it because the device size and resolution are not the same for all devices. As a result, you can face this issue. Suppose you are using an iPhone 14 pro simulator. The constant width of 56 is fine which you can see in the above snippet. However, if you try to run it on iPhone SE or any small android devices, you will face A RenderFlex overflowed by [pixelInteger] pixels on the right issue

    Therefore, my recommendation is try using Expanded, Flexible and Spacer widgets in order to accomplish your goal. I hope my explanation is clear enough to clear all your current and upcoming confusions. Feel free to let me know if you still have any confusions. Thank you.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search