Skip to main content

Flutter Set Fixed Width Height of ElevatedButton

Default ElevatedButton is created with its predefined width height accordingly to the device screen. But in many cases we want to make ElevatedButton with fixed width and height because of the client requirements. In that case to set fixed width height of ElevatedButton we have to use fixedSize property and pass width and height in double format in Size widget.

Syntax:

fixedSize: const Size(double width, double height)

Flutter Set Fixed Width Height of ElevatedButton:

1. Applying Size widget with our size on ElevatedButton.
ElevatedButton(
        style: ElevatedButton.styleFrom(
          fixedSize: const Size(150, 150),
          backgroundColor: Colors.green,
          textStyle: const TextStyle(
            fontSize: 24,
          ),
        ),
        onPressed: tempFunction,
        child: const Text(
          'Fixed Width Height Button',
          textAlign: TextAlign.center,
        ),
      ),
2. 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 tempFunction() {
    print('onPress Called...');
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Center(
      child: ElevatedButton(
        style: ElevatedButton.styleFrom(
          fixedSize: const Size(150, 150),
          backgroundColor: Colors.green,
          textStyle: const TextStyle(
            fontSize: 24,
          ),
        ),
        onPressed: tempFunction,
        child: const Text(
          'Fixed Width Height Button',
          textAlign: TextAlign.center,
        ),
      ),
    )));
  }
}
Screenshot:
Flutter Set Fixed Width Height of ElevatedButton

Comments