ConstrainedBox Widget in Flutter - A widget that imposes additional constraints on its child.

This Article is posted by seven.srikanth at 10/25/2019 5:43:26 AM

Using ConstrainedBox Widge you will be able to impose additional constraints on its child widgets. For example, if you wanted a child to have a minimum height of 50.0 logical pixels, you could use const BoxConstraints(minHeight: 50.0) as the constraints. Similarly, if you wanted a child to have a maximum height of 50.0 logical pixels, font-size: 1rem;](you could use const BoxConstraints(maxHeight: 50.0) as the constraints. Here is an example on Constrained Box Widget. ![](https://fluttercentral.com/Uploads/002eb320-14ad-49ce-8c34-328fa8409aca.PNGwidth="50%height="auto]( Without using ConstrainedBox the output will look as below. ![](https://fluttercentral.com/Uploads/c0667537-31ea-4ee4-82e6-af816abc699a.PNGwidth="50%height="auto]( Here is the example code from main.dart file. 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-wrap;]( 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;](StatelessWidget { 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;]("ConstrainedBox Example"),), body: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](ConstrainedBox( constraints: color: #569cd6;](const color: #4ec9b0;](BoxConstraints( maxHeight: color: #b5cea8;](100.0, maxWidth: color: #b5cea8;](100.0 ), child: color: #569cd6;](const color: #4ec9b0;](Card(child: color: #4ec9b0;](Text(color: #ce9178;]('maxHeight: 100.0 and maxWidth: 100.0')), ), color: #4ec9b0;](ConstrainedBox( constraints: color: #569cd6;](const color: #4ec9b0;](BoxConstraints( minHeight: color: #b5cea8;](100.0, minWidth: color: #b5cea8;](100.0 ), child: color: #569cd6;](const color: #4ec9b0;](Card(child: color: #4ec9b0;](Text(color: #ce9178;]('minHeight: 100.0 and minWidth: 100.0')), ), color: #4ec9b0;](ConstrainedBox( constraints: color: #569cd6;](const color: #4ec9b0;](BoxConstraints( minHeight: color: #b5cea8;](100.0, ), child: color: #569cd6;](const color: #4ec9b0;](Card(child: color: #4ec9b0;](Text(color: #ce9178;]('minHeight: 100.0')), ), color: #4ec9b0;](ConstrainedBox( constraints: color: #569cd6;](const color: #4ec9b0;](BoxConstraints( minWidth: color: #b5cea8;](100.0, ), child: color: #569cd6;](const color: #4ec9b0;](Card(child: color: #4ec9b0;](Text(color: #ce9178;]('minWidth: 100.0')), ), ], ), ) ); }} Hope this is helpful to you.Thanks,Srikanth

Tags: ConstrainedBox



0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.




© 2018 - Fluttercentral | Email to me - Seven.srikanth@gmail.com