Flutter Create Full Width Button

Hello friends, To create full width ElevatedButton button in flutter which match its Root widget width we have to apply minimumSize: const Size.fromHeight(double Value) property on button. It sets the default button height will be given height in double format and width set as fill parent widget width.

Flutter Create Full Width Button:

1. Creating ElevatedButton with full width match to its parent container using minimumSize: const Size.fromHeight(Double).

ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.green,
          minimumSize: const Size.fromHeight(44),
          textStyle: const TextStyle(
            fontSize: 21,
          ),
        ),
        onPressed: temp,
        child: const Text(
          'Full Width Button',
          textAlign: TextAlign.center,
        ),
      ),

2. We are also wrapping ElevatedButton in padding widget to apply padding from left right side.

Padding(
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.green,
          minimumSize: const Size.fromHeight(44),
          textStyle: const TextStyle(
            fontSize: 21,
          ),
        ),
        onPressed: temp,
        child: const Text(
          'Full Width Button',
          textAlign: TextAlign.center,
        ),
      ),
    )

Button Screenshot:

Complete source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(const App());

class App extends StatelessWidget {
  const App({super.key});

  void temp() {
    print('onPress Called...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SafeArea(
                child: Center(
                    child: Padding(
      padding: const EdgeInsets.fromLTRB(12, 12, 12, 12),
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.green,
          minimumSize: const Size.fromHeight(44),
          textStyle: const TextStyle(
            fontSize: 21,
          ),
        ),
        onPressed: temp,
        child: const Text(
          'Full Width Button',
          textAlign: TextAlign.center,
        ),
      ),
    )))));
  }
}