ConstrainedBox Widget - Flutter

One of the flutter SDK's built-in widgets is ConstrainedBox. Its purpose is to give its child widgets size limits. It's quite useful when we want an image or container to stay within a specific height and width. Keeping text in a wrapped layout can also be achieved by having the Text widget be a child of ConstrainedBox. Alternatively, you can find this capability in the SizedBox widget.

In this article, you will learn how to create your ConstrainedBox widget in Flutter. So let’s take ConstrainedBox widget example of the ConstrainedBox widget in Flutter of Mobile application.

Video example of ConstrainedBox widget mentioned below

Syntax

 ConstrainedBox(
 {   Key key,
   @required BoxConstraints constraints,
   Widget child
 }
 )

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

import 'package:flutter/material.dart';

void main() {

runApp(RunMyApp());

}

Step 3: Creating a stateless widget

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

class RunMyApp extends StatelessWidget {

const RunMyApp({super.key});

@override

Widget build(BuildContext context) {

return MaterialApp(home);

}

Step 4: Final code of ConstrainedBox.

 import 'package:flutter/material.dart';

 void main() {
   runApp(
     MaterialApp(
       home: Scaffold(
          appBar: AppBar(
           title: Text('CandidRoot Solutions'),
           backgroundColor: Colors.blue[400],
           centerTitle: true,
         ), 
         body: Row(
             mainAxisAlignment: MainAxisAlignment.spaceAround,
             children: <Widget>[
               Container(margin: const EdgeInsets.all(15.0),
                   padding: const EdgeInsets.all(3.0),
                   decoration: BoxDecoration(
                       border: Border.all(color: Colors.blueAccent)),
                   child: ConstrainedBox(
                     constraints:
                         const BoxConstraints.expand(height: 300, width: 200),
                     child: const Text(
                       'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
                       style: TextStyle(fontSize: 15),
                     ), 
                   )),
               Container(       decoration: BoxDecoration(
                  border: Border.all(color: Colors.blueAccent)),
                  child: ConstrainedBox(
                constraints:
                    const BoxConstraints.expand(height: 300, width: 200),
                 child: const Text(
                   'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.',
 
                   style: TextStyle(fontSize: 15),
                 ), //Text
               ))
            ]), //ConstrainedBox
         
       ), //Scaffold
     ), //MaterialApp
   );
 }

Output of above example

Happy coding!

in Mobile

365Bloggy July 3, 2024

ConstrainedBox Widget - Flutter

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project).

Step 2: Adding material package

Step 3: Creating a stateless widget

Step 4: Final code of ConstrainedBox.

Share this post

Tags

SUBSCRIBE THIS FORM

Recent Posts

Our blogs

Archive

Follow us