Raised button widget by default dose not support custom width and height. We have to wrap the Raised button component in Container Widget to achieve custom height and width. Container widget supports width and height properties and raised button automatically expand itself to its given parent dimensions. So in this tutorial we would Set Raised Button Height Width in Flutter Android iOS Example.
Contents in this project Set Raised Button Height Width in Flutter Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class named as MyApp extends with State less widget.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. Creating a function named as sampleFunction(). We would call this function on button onPress event. We would simply printing a message on terminal screen in this function using print dart method.
|
1 2 3 |
sampleFunction(){ print('Button Clicked'); } |
5. Creating Scaffold widget -> Safe Area widget -> Center widget in widget build area.
|
1 2 3 4 5 6 7 8 9 10 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child : Center( child: ) ) ) ) } |
6. Creating a Container widget in Center widget with Height and Width properties and Put the Raised button widget as child widget in Container widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
Container( width: 180.0, height: 120.0, child :RaisedButton( child: Text(" Sample Button "), onPressed: sampleFunction, color: Color(0xff0091EA), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ) |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { sampleFunction(){ print('Button Clicked'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SafeArea( child : Center( child: Container( width: 180.0, height: 120.0, child :RaisedButton( child: Text(" Sample Button "), onPressed: sampleFunction, color: Color(0xff0091EA), textColor: Colors.white, splashColor: Colors.grey, padding: EdgeInsets.fromLTRB(10, 10, 10, 10), ) ) ) ) ), ); } } |
Screenshot:
Useful for me
Welcome bro 🙂 .
I need a size that will adopt according to the size of the screen and not a fix size.