Responsive Flutter Layout With FittedBox Widget
Responsive application layout, its UI as per the size and shape of the screen or window. This is particularly essential when the equivalent application can run on an assortment of devices, from a watch, phone, tablet, to a PC or desktop computer. At the point when the client resizes the window on a PC or desktop or changes the direction of the phone or tablet, the application ought to react by adjusting the UI appropriately.
The idea of Responsive Design is tied in with utilizing one lot of code that reacts to different changes to the layout. Stages, for example, the iOS and local Android SDKs, handled this issue with “all-inclusive layouts.” The widespread layouts react to layout changes by utilizing imperatives and naturally resizing components.
In this blog, We will be going to explore the Responsive Flutter Layout With FittedBox Widget and show a demo of how to use a fitted box widget in your flutter applications.
Table Of Contents::
FittedBox
The FittedBox widget is a single child layout widget, which implies it can have just a single child assigned to it. In this model, the Row widget is added as a child to FittedBox widgets. The Row widget has two Conatiner as its children. Typically, the second child of Row widgets will overflow to the one side when it renders its children on a screen size, which isn’t adequate to oblige the entirety of its children. However, with FittedBox, this issue of a widget overflowing is solved. It scales and positions its child inside the parent widget.https://www.youtube.com/embed/T4Uehk3_wlY?feature=oembed
It makes a widget that scales and positions its child inside itself as indicated by Fit. FittedBox Widget is a basic Widget to help in making a snappy and neater approach to contain a child inside a parent. The fundamental purpose behind utilizing the FittedBox is to make the App UI look neater for dynamic children with shifting lengths.
FittedBox — Usage
- The primary use is to create a simple Container that can fit any child inside it even if it scales during the app flow.
- It gives a cleaner UI look to the application.
- Helpful when Dynamic data is to be projected on the UI (like Images, Paragraphs).
FittedBox — Implementation
- Make use of the FittedBox class.
- Make sure that there is something to fit inside the Container/Card widget before using the FittedBox.
- Primarily used inside ListViews in order to control dynamic Images and text; otherwise, you will use column also.
FittedBox — Properties
- Primarily takes in two properties
— Fit
— Alignment
- Important to also understand other Widgets like Container, Material, and playing around with the Child and Parent containers for better results.
Implementation:
Step 1: Add Assets
Add assets to pubspec — yaml file.
We will add images in the assets folder.
assets:
- assets/
Step 2: Run flutter packages get in the root directory of your app.
Step 3: Enable AndriodX
Add this to your grade.properties file:
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=true
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called fitted_box_page.dart inside the lib folder.
- > Using without FittedBox
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Card(
color: Colors.white,
child: Row(
children: [
Container(
child: Text(
"Understand Without FittedBox",
style: TextStyle(fontSize: 20,color: Colors.black),
),
),
Container(
height: 200,
child:
Image.asset("assets/screen.png"),
),
],
),
),
],
),
Like we have seen, the example application looks underneath. The image is getting overflowed to the right, and the application can’t render it. Think about a circumstance where the information is going to come from a server. There will be very little control over what to render to the user and what not to render to the user. FittedBox widget ensures that the final data is being appropriately rendered to the user independent of how the data is. The child is compelled to fit inside the parent. We will perceive how the data can be Fit inside the Container in the rest of the areas underneath.
- > Using with FittedBox
From the example above, the App looks appear as though it can’t handle the overflow of pixels. The Text widget we indicated is no place in the image. We will see what happens when the FittedBox widget is added to the application.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FittedBox(
child: Card(
color: Colors.white,
child: Row(
children: [
Container(
child: Text(
"Understand With FittedBox",
style: TextStyle(fontSize: 20,color: Colors.black),
),
),
Container(
height: 200,
child:
Image.asset("assets/screen.png"),
),
],
),
),
),
],
),
This is how the layout has been changed, and the application looks like,
Code File
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class FittedBoxPage extends StatefulWidget {
@override
_FittedBoxPageState createState() => _FittedBoxPageState();
}
class _FittedBoxPageState extends State<FittedBoxPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("FittedBox Layout Widget Demo"),
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FittedBox(
child: Card(
color: Colors.white,
child: Row(
children: [
Container(
child: Text(
"Understand With FittedBox",
style: TextStyle(fontSize: 20,color: Colors.black),
),
),
Container(
height: 200,
child:
Image.asset("assets/screen.png"),
),
],
),
),
),
],
),
);
}
}
Conclusion :
In the article, I have explained the basic demo of the FittedBox Widget. You can modify this code according to your choice, and this was a small basic introduction of FittedBox from my side and its working using Flutter.
I hope this blog will provide you with sufficient information in Trying up Responsive Flutter Layout With FittedBox Widget in your flutter projects. FittedBox is principally helpful in handling dynamic data from the server. It ensures that the UI looks reliable and doesn’t give any spillages and break the UI flow. Make a point to try different things with the various values present before fixing on the last FittedBox property blend, So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
find the source code of the Flutter FittedBox Widget Demo:
flutter-devs/flutter_fittedbox_widget_demo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
