Flutter - ConstrainedBox Widget Last Updated : 26 Sep, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report ConstrainedBox is a built-in widget in flutter SDK. Its function is to add size constraints to its child widgets. It comes quite handy if we want a container or image to not exceed a certain height and width. It is also good to keep text in a wrapped layout by making the Text widget a child on ConstrainedBox. This functionality can also be found in SizedBox widget or else. Constructor of ConstrainedBox Class:ConstrainedBox( {Key key, @required BoxConstraints constraints, Widget child} )Property of ConstrainedBox Widget:constraints: This property takes in the BoxConstrain Class as the object. It puts constraints it's child widget using the functions of the BoxConstraints class. Example 1: Dart import 'package:flutter/material.dart'; //imported googles material design library void main() { runApp( /**Our App Widget Tree Starts Here**/ MaterialApp( home: Scaffold( appBar: AppBar( title: Text('GeeksforGeeks'), backgroundColor: Colors.greenAccent[400], centerTitle: true, ), //AppBar body: Center( /** ConstrainedBox Widget **/ child: ConstrainedBox( constraints: BoxConstraints.expand(height: 200, width: 200), child: Container( color: Colors.green, ), //Container widget ), //ConstrainedBox ), //Center ), //Scaffold ), //MaterialApp ); } Output: Explanation: In this flutter application we can see that the ConstrainedBox Widget is used to constrain the height and width of its child widget which is a Container. Here we have used BoxConstraints.expanded with the height and width parameter set to 200. We can notice that the height and width parameters are not mentioned in the Container widget it just expands to fill its parent widget. Example 2: Dart import 'package:flutter/material.dart'; //imported googles material design library void main() { runApp( /**Our App Widget Tree Starts Here**/ MaterialApp( home: Scaffold( appBar: AppBar( title: Text('GeeksforGeeks'), backgroundColor: Colors.greenAccent[400], centerTitle: true, ), //AppBar body: Center( /** ConstrainedBox Widget **/ child: ConstrainedBox( constraints: BoxConstraints.expand(height: 200, width: 200), child: Text( 'A Computer Science portal for geeks. It contains well written,well thought and well explained computer science and programmingarticles, quizzes, interview experiences and much more.', style: TextStyle(fontSize: 15), ), //Text ), //ConstrainedBox ), //Center ), //Scaffold ), //MaterialApp ); } Output: Explanation: In this flutter app the ConstrainedBox widget is used to wrap the text in a 200 X 200 box. Here also the text expands to fill the box as BoxConstraints.expand is used. This application of ConstrainedBox widget is very helpful when we want our text to not spill out of a certain bounded area. Comment More infoAdvertise with us A ankit_kumar_ Follow Improve Article Tags : Flutter Flutter-Widgets Similar Reads Flutter Tutorial This Flutter Tutorial is specifically designed for beginners and experienced professionals. It covers both the basics and advanced concepts of the Flutter framework.Flutter is Googleâs mobile SDK that builds native Android and iOS apps from a single codebase. It was developed in December 2017. When 7 min read Top 50 Flutter Interview Questions and Answers for 2025 Flutter is an open-source, cross-platform application development framework. It was developed by Google in 2017. It is used to build applications for Android, iOS, Linux, Mac, Windows, and the web. Flutter uses the Dart programming language. It provides a simple, powerful, efficient, and easy-to-und 15+ min read What is Widgets in Flutter? Flutter is Google's UI toolkit for crafting beautiful, natively compiled iOS and Android apps from a single code base. To build any application we start with widgets - The building block of Flutter applications. Widgets describe what their view should look like given their current configuration and 5 min read Flutter | An introduction to the open source SDK by Google Flutter is Googleâs Mobile SDK to build native iOS and Android, Desktop (Windows, Linux, macOS), and Web apps from a single codebase. When building applications with Flutter, everything is Widgets â the blocks with which the flutter apps are built. They are structural elements that ship with a bunch 5 min read Flutter - Architecture Application Flutter architecture application mainly consists of: WidgetsGesturesConcept of StateLayersWidgetsWidgets are the primary component of any flutter application. It acts as a UI for the user to interact with the application. Any flutter application is itself a widget that is made up of a combination of 3 min read Flutter - Changing App Icon Flutter SDK is an open-source software development kit for building beautiful UI which is natively compiled. When we create a Flutter Project, it comes with the default Flutter icon. In order to get the app published in stores like Google Play Store, Apple App Store, etc the default icon can be chan 3 min read Flutter - AppBar Widget AppBar is usually the topmost component of the app (or sometimes the bottom-most), it contains the toolbar and some other common action buttons. As all the components in a Flutter application are a widget or a combination of widgets. So AppBar is also a built-in class or widget in Flutter which give 7 min read Scaffold class in Flutter with Examples The Scaffold is a class in flutter that provides many widgets or we can say APIs. The Scaffold will expand or occupy the whole available space in device screen .The class Hierarchy is as follows:Object â³ Diagnosticable â³ Diagnosticable Tree â³ Widget â³ StateFul Widget â³ ScaffoldThe constructor of the 8 min read Container class in Flutter Container class in flutter is a convenience widget that combines common painting, positioning, and sizing of widgets. A Container class can be used to store one or more widgets and position them on the screen according to our convenience. Basically, a container is like a box to store contents. A bas 8 min read Flutter - Stateful vs Stateless Widgets The state of an app can very simply be defined as anything that exists in the memory of the app while the app is running. This includes all the widgets that maintain the UI of the app including the buttons, text fonts, icons, animations, etc. So now that we know what are these states let's dive dire 6 min read Like