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

How to fix size of elevated button inside a list view? – Flutter

I try to fix the width size of my button but each time it takes all the available space in the width of the screen. I attach the code of the button :

ConstrainedBox(
              constraints: BoxConstraints.tight(const Size(200, 35)),
              child: ElevatedButton(
                onPressed: () async {
                  types.Room room =
                      await FirebaseChatCore.instance.createRoom(user!);
                  if (!mounted) return;
                  Navigator.of(context).push(
                    MaterialPageRoute(
                      builder: (context) => ChatPage(room: room),
                    ),
                  );
                },
                child: Container(
                  color: Colors.blue,
                  child: const Text(
                    "Send Message",
                  ),
                ),
              ),
            ),

I tried to change the container by SizedBox but the same error has occurred.

Thanks for your help,

Tags:

3

Answers


  1. 0

    You can resize your Elevated button with SizedBox like this:

    SizedBox(
        width: 250,
        child: ElevatedButton(
          onPressed: () {
            //onTap function define here
          },
          child: const Text('Send Message'),
        ),
      )
    Login or Signup to reply.
  2. 0

    You can wrap your ElevatedButton with SizedBox and then Further wrap it up with UnconstainedBox widget if the Button still doesn’t get the explicit size.

    UnconstrainedBox(
    child: SizedBox(
        width: 140,height:45,
        child: ElevatedButton(
          onPressed: () {
            //onTap function define here
          },
          child: const Text('Send Message'),
        ),
      )
)
    Login or Signup to reply.
  3. 0

    ElevatedButton have style parameter that use ElevatedButton.styleFrom. In which we have three parameter for size.

    ElevatedButton(
  child: Text('Button'),
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    fixedSize: Size(150, 150), //For Fixed Size
    minimumSize: Size(100, 100), //For Minimum Size of button
    maximumSize: Size(200, 200), //For Maximum Size of button
  ),
),

    To change only the width, use Size.fromWidth(100).

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

Back To Top
Search