Responsive Flutter Layout With FittedBox Widget

Learn How To Utilize The FittedBox Layout Widget To Make Responsive Layouts For Flutter Apps

Shaiq khan
Oct 6 · 6 min read
Image for post
Image for post

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.

FittedBox

FittedBox — Usage

FittedBox — Implementation

FittedBox — Properties

Implementation

Code Implement

Code File

Conclusion

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.

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.

Image for post
Image for post
  • > 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,

Image for post
Image for post

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 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:

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 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.

Image for post
Image for post

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high…

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Shaiq khan

Written by

Flutter Developer

FlutterDevs

FlutterDevs intent to deliver Flutter apps with high quality. We’ve adopted Design First attitude which helps us deliver applications of highest quality.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store