Responsive Framework In Flutter
Flutter is Google’s UI tool stash for making excellent, natively compiled iOS and Android applications from a single code base. To construct any application, we start with widgets — The building square of flutter applications. Widgets portray what their view ought to resemble given their present design and state. It incorporates a text widget, row widget, column widget, container widget, and some more.
In this article, we will explore the Responsive Framework in flutter using the flutter_Responsive_framework_package. With the help of the package, we can easily achieve a Responsive screen. So let’s get started.
Table Of Contents :
Responsive Framework
Implementation
Code Implement
Code File
Conclusion
Responsive Framework :
Responsive Framework adapts your UI to different screen sizes automatically. Create your UI once and have it display pixel-perfect on mobile, tablet, and desktop!
Supporting multiple display sizes often means recreating the same layout multiple times. Under the traditional Bootstrap approach, building responsive UI is time-consuming, frustrating, and repetitive. Furthermore, getting everything pixel perfect is near impossible and simple edits take hours.
Implementation :
Step 1: Add the dependencies
Add dependencies to pubspec — yaml file.
dependencies :
dependencies:
responsive_framework: ^0.1.4Step 2: Importing
import 'package:responsive_framework/responsive_framework.dart';Step 3: Enable AndriodX
org.gradle.jvmargs=-Xmx1536M
android.enableR8=true
android.useAndroidX=true
android.enableJetifier=trueCode Implement :
You need to implement it in your code respectively:
Before creating UI like Responsive Framework, we have added ResponsiveWrapper.builder() inside Material App Widget in main. dart file in which initialize MaxWith, MinWith, and Breakpoints which is of List type, inside it resize devices like Mobile, Tablet, Desktop, And the autoscale value is defined, let’s understand it with its code reference below.
ResponsiveWrapper.builder(
BouncingScrollWrapper.builder(context, widget!),
maxWidth: 1200,
minWidth: 450,
defaultScale: true,
breakpoints: [
ResponsiveBreakpoint.resize(450, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: MOBILE),
ResponsiveBreakpoint.autoScale(800, name: TABLET),
ResponsiveBreakpoint.autoScale(1000, name: TABLET),
ResponsiveBreakpoint.resize(1200, name: DESKTOP),
ResponsiveBreakpoint.autoScale(2460, name: "4K"),
],
background: Container(color: Color(0xFFF5F5F5))
),AutoScale shrinks and expands your layout proportionally, preserving the exact look of your UI. This eliminates the need to manually adapt layouts to mobile, tablet, and desktop.
After this, we have created a user profile screen, inside which is the image of the user, and two different types of lists in which the image and some text have been given.
Code File :
import 'package:flutter/material.dart';
import 'package:responsive_framwork_demo/Constants/Constants.dart';
import 'package:responsive_framwork_demo/device_size.dart';
import 'package:responsive_framwork_demo/model/popular_course_model.dart';
import 'package:responsive_framwork_demo/model/result_model.dart';
class ProfileScreen extends StatefulWidget {
@override
_ProfileScreenState createState() => _ProfileScreenState();
}
class _ProfileScreenState extends State<ProfileScreen> {
late List<PopularCourseModel> popularCourseModel;
late List<ResultModel> resultModel;
@override
void initState() {
popularCourseModel = Constants.getPopularCourseModel();
resultModel = Constants.getResultModel();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
elevation: 0.0,
title: Text(
'PROFILE',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
letterSpacing: 0.5),
),
centerTitle: true,
),
body: SingleChildScrollView(
child: Container(
padding: EdgeInsets.only(top: 20),
child: Column(
children: [
ClipOval(
child: CircleAvatar(
maxRadius: 50,
child: Image.asset(
'assets/images/mans_img.jpeg',
width: DeviceSize.width(context),
fit: BoxFit.fill,
),
),
),
SizedBox(
height: 30,
),
Text(
'Crowley Singer',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
letterSpacing: 0.3),
),
Container(
margin: EdgeInsets.only(top: 25, left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text(
'22',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
letterSpacing: 0.5),
),
SizedBox(
height: 10,
),
Text(
'Courses',
style: TextStyle(
fontFamily: 'Poppins Regular',
color: Colors.black45,
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 0.3),
),
],
),
Container(
height: 32,
width: 1,
color: Colors.black12,
),
Column(
children: [
Text(
'32',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
letterSpacing: 0.5),
),
SizedBox(
height: 10,
),
Text(
'Mentors',
style: TextStyle(
fontFamily: 'Poppins Regular',
color: Colors.black45,
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 0.3),
),
],
),
Container(
height: 32,
width: 1,
color: Colors.black12,
),
Column(
children: [
Text(
'48',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 15,
fontWeight: FontWeight.bold,
letterSpacing: 0.5),
),
SizedBox(
height: 10,
),
Text(
'Friends',
style: TextStyle(
fontFamily: 'Poppins Regular',
color: Colors.black45,
fontSize: 11,
fontWeight: FontWeight.bold,
letterSpacing: 0.3),
),
],
),
],
),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20, right: 20),
height: 1,
color: Colors.black12,
width: DeviceSize.width(context),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'YOUR COURSES',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 12,
fontWeight: FontWeight.w700,
letterSpacing: 0.5),
),
Icon(Icons.more_horiz),
],
),
),
Container(
margin: EdgeInsets.only(top: 10, left: 20, right: 20),
height: DeviceSize.height(context) / 7,
// color:Colors.purple,
child: ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(width: 10);
},
scrollDirection: Axis.horizontal,
// padding:EdgeInsets.only(left:10),
//shrinkWrap: true,
itemCount: popularCourseModel.length,
itemBuilder: (BuildContext context, int index) {
return _buildYourCourseModel(
popularCourseModel[index], index);
},
),
),
Container(
margin: EdgeInsets.only(top: 30, left: 20, right: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'YOUR PROGRESS',
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 12,
fontWeight: FontWeight.w700,
letterSpacing: 0.5),
),
Icon(Icons.more_horiz),
],
),
),
Container(
// height:DeviceSize.height(context),
width: DeviceSize.width(context),
margin: EdgeInsets.only(top: 20),
child: ListView.separated(
separatorBuilder: (BuildContext context, int index) {
return SizedBox(height: 10);
},
scrollDirection: Axis.vertical,
// padding:EdgeInsets.only(left:10),
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
itemCount: resultModel.length,
itemBuilder: (BuildContext context, int index) {
return _buildResultModel(resultModel[index], index);
},
),
),
],
),
),
),
);
}
Widget _buildYourCourseModel(PopularCourseModel items, int index) {
return Container(
width: 70,
child: Column(
//mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blueGrey.shade50,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
), //BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
), //BoxShadow
],
),
child: ClipOval(
child: CircleAvatar(
backgroundColor: Colors.white,
maxRadius: 30,
// child:Image.asset('assets/images/earth.png',height:45,color:Colors.blueAccent,) ,
child: Padding(
padding: EdgeInsets.all(4),
child: Image.asset(
items.img,
fit: BoxFit.cover,
scale: 7,
),
),
),
),
),
Expanded(
child: Container(
padding: EdgeInsets.only(top: 0),
alignment: Alignment.center,
child: Text(
items.title,
style: TextStyle(
fontFamily: 'Poppins Medium',
fontWeight: FontWeight.w700,
letterSpacing: 0.3,
fontSize: 11,
color: Colors.black),
),
),
),
],
),
);
}
Widget _buildResultModel(ResultModel items, int index) {
return Container(
margin: EdgeInsets.only(left: 20, right: 20),
height: DeviceSize.height(context) / 9,
// / color:Colors.pink,
child: Row(
children: [
Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.blueGrey.shade50,
offset: const Offset(
5.0,
5.0,
),
blurRadius: 10.0,
spreadRadius: 2.0,
), //BoxShadow
BoxShadow(
color: Colors.white,
offset: const Offset(0.0, 0.0),
blurRadius: 0.0,
spreadRadius: 0.0,
), //BoxShadow
],
),
child: ClipOval(
child: CircleAvatar(
backgroundColor: Colors.white,
maxRadius: 28,
// child:Image.asset('assets/images/earth.png',height:45,color:Colors.blueAccent,) ,
child: Padding(
padding: EdgeInsets.all(4),
child: Image.asset(
items.img,
fit: BoxFit.cover,
scale: 7,
),
),
),
),
),
SizedBox(
width: 20,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
items.title,
style: TextStyle(
fontFamily: 'Poppins Medium',
color: Colors.black,
fontSize: 11.5,
fontWeight: FontWeight.w700,
letterSpacing: 0.5),
),
SizedBox(
height: 5,
),
Text(
items.subTitle,
style: TextStyle(
fontFamily: 'Poppins Regular',
color: Colors.black45,
fontSize: 11,
fontWeight: FontWeight.w700,
letterSpacing: 0.5),
),
],
),
],
),
);
}
}Conclusion:
In this article, I have explained Responsive Framework In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Responsive Framework In Flutter demo from our side.
I hope this blog will provide you with sufficient information on Trying up the Responsive Framework In Flutter in your flutter project. We showed you what the Responsive Framework In Flutter is and work on it in your flutter applications, 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.
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.
