How to fix size of elevated button inside a list view?-CodePudding

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,

CodePudding user response：

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'),
        ),
      )
)

CodePudding user response：

You can use style of elevated button like below

  ElevatedButton(
          onPressed:onclick,
          style: Theme.of(context).textButtonTheme.style!.copyWith(
          side: MaterialStateProperty.all(borderSide),
          minimumSize: 100 // this line is useful for size   
          maximumSize: 100, // this line is useful for size 

        ),

CodePudding user response：

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'),
        ),
      )

CodePudding user response：

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).