<p>In this article, I'm going to share the email of how to expand the size of the button in Flutter. This can be achieved by wrapping the Button widget inside a FractionallySizedBox and specifying widthFactor and heightFactor as below. color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #4ec9b0;](FractionallySizedBox( widthFactor: color: rgb(181, 206, 168);](0.5,line-height: 19px;]( heightFactor: color: #b5cea8;](0.5, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](print(color: #ce9178;]('Button Clicked'); }, child: color: #4ec9b0;](Text(color: #ce9178;]('Click me'), ), ) So, widthFactor expands the button horizontally and heighFactor expands the button vertically. This is how your button will appear. ; background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart'; color: #569cd6;](void color: #dcdcaa;](main() => color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp()); color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override color: #4ec9b0;](_MyAppState color: #dcdcaa;](createState() => color: #4ec9b0;](_MyAppState();} color: #6a9955;](// How to expand a Button in Flutter?color: #569cd6;](class color: #4ec9b0;](_MyAppState color: #569cd6;](extends color: #4ec9b0;](State { color: #4ec9b0;](double padValue = color: #b5cea8;](0; color: #569cd6;](@override color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #4ec9b0;](MaterialApp( home: color: #4ec9b0;](Scaffold( appBar: color: #4ec9b0;](AppBar( title: color: #4ec9b0;](Text(color: #ce9178;]("Expand Button Example"), ), body: color: #4ec9b0;](Center( child: color: #4ec9b0;](Container( alignment: color: #4ec9b0;](Alignment.center, child: color: #4ec9b0;](FractionallySizedBox( widthFactor: color: #b5cea8;](0.5, heightFactor: color: #b5cea8;](0.5, child: color: #4ec9b0;](RaisedButton( onPressed: () { color: #dcdcaa;](print(color: #ce9178;]('Button Clicked'); }, child: color: #4ec9b0;](Text(color: #ce9178;]('Click me'), ), ) ), )), ); }}</p> <p>Thanks,Srikanth</p>
How to expand the size of the button in Flutter?
This Article is posted by seven.srikanth at 9/21/2019 9:54:02 AM
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter
Tags: FractionallySizedBox; RaisedButton; Expand; Shrink;
Check out our other latest articles
Safearea widget - How to avoid visual overlap with Notch on flutter mobile app?How to convert row of widgets into column of widgets in flutter based on screen size?
How to run Flutter programs from GitHub?
How to get screen orientation in flutter?
NavigationRail example in flutter