The same code base in flutter allows us to run on different platforms but different screen sizes, guidelines, and different ways of user interaction, so we have to create adaptive and responsive UI to create any UI which Looks and feels the same for all our operating systems.
In this blog, we will explore Adaptive Apps In Flutter. We will also implement a demo program and how to use them in your flutter applications. So let’s get started.
Table Of Contents :
Adaptive Apps:
There is no clear definition of adaptive design in flutter but Platform adaptive apps include model overlays on desktops and sheets on mobile that reflect users’ expectations and allows layout and navigation flow from maximum utility flutter to easily adaptive and responsive UI across all platforms such as mobile, desktop devices.
Mobile Demo Module
In this mobile demo video, an image list is shown in the background and using the SlidingUpPanel(), inside which the vertical and horizontal data list is displayed and SlidingUpPanel() is scrolling upwards.
Tablet Demo Module :
Mobile demo video and tablet video are the same, in this also an image list is shown in the background and the SlidingUpPanel() is used.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file calledadaptive_app_demo inside the lib folder.
Before creating the pulsating adaptive design, we have created a dart file inside which we have MediaQuery.of (reference). To test different mobile and tablet sizes. Which will manage our UI on screen size so we will use these functions inside the build function.
As we have taken a bool value for mobile when the width of our device is less than 800 then it will display the size of mobile.
static bool isMobile(BuildContext context) =>
MediaQuery.of(context).size.width < 800;Similarly, we have taken a bool value for the tablet when the width of our device is more than 800 and less than 1200 then it will display the size of the tablet
static bool isTablet(BuildContext context) =>
MediaQuery.of(context).size.width >= 800 &&
MediaQuery.of(context).size.width < 1200;After that, we have used two different widgets to deal with different shapes and we have created different dart files for these widgets.
Expanded(
child:isMobile(context)
? MobileScreen()
: isTablet(context)
? TabletScreen()
: MobileScreen(),
),For Mobile View:
Now we have created a UI for mobile, inside which we have created a list containing some text and images. Let us understand this in detail.
First, we have created some model classes for the data list.
class HomeTestPanelModel{
String _img;
String _title;
String _subTitle;
HomeTestPanelModel(this._img,this._title,this._subTitle);
String get img=>_img;
String get title=>_title;
String get subTitle=>_subTitle;
}After this, we have created a list with the help of the ListViewBuilder() widget, which contains the image and the title.
ListView.builder(
itemCount:homeScreenBackground.length,
scrollDirection:Axis.vertical,
shrinkWrap:true,
itemBuilder:(BuildContext context,int index){
return _buildHomeScreenBackground(homeScreenBackground[index]);
}
),When we run the application, we ought to get the screen’s output like the underneath screen capture.
For Tablet View:
We have created the same UI for both mobile and tablet, in this, we have also made a list and defined some data, So both the UI will be known only when the adaptive and responsive UI will be detected.
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File :
import 'package:adaptive_app_demo/Constants/Constants.dart';
import 'package:flutter/material.dart';
import 'package:sliding_up_panel/sliding_up_panel.dart';
import 'package:adaptive_app_demo/model/home_screen_background.dart';
import 'package:adaptive_app_demo/model/home_test_panel_model.dart';
import 'package:adaptive_app_demo/model/home_test_type_model.dart';
import 'package:adaptive_app_demo/themes/appthemes.dart';
import 'package:adaptive_app_demo/themes/device_size.dart';
class MobileScreen extends StatefulWidget {
@override
_MobileScreenState createState() => _MobileScreenState();
}
class _MobileScreenState extends State<MobileScreen> {
List<HomeScreenBackground> homeScreenBackground;
List<HomeTestTypeModel> homeTestTypeModel;
List<HomeTestPanelModel> homeTestPanelModel;
@override
void initState() {
homeScreenBackground = Constants.getHomeScreenBackground();
homeTestTypeModel = Constants.getHomeTestTypeModel();
homeTestPanelModel = Constants.getHomeTestPanelModel();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Stack(
children: [
Container(
height: DeviceSize.height(context),
child: ListView.builder(
itemCount: homeScreenBackground.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return _buildHomeScreenBackground(
homeScreenBackground[index]);
}),
),
Container(
padding: EdgeInsets.only(top: 20.0, left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
// mainAxisAlignment:MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Text(
'Welcome,',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w700,
letterSpacing: 0.5),
),
),
SizedBox(
height: 10,
),
Flexible(
child: Text(
'Aeomedix',
style: TextStyle(
fontSize: 19,
color: Colors.white,
fontWeight: FontWeight.bold,
letterSpacing: 0.5),
),
),
],
),
),
SlidingUpPanel(
defaultPanelState: PanelState.CLOSED,
parallaxEnabled: true,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0)),
maxHeight: DeviceSize.height(context) / 1,
minHeight: DeviceSize.height(context) / 1.5,
panel: SingleChildScrollView(
physics: NeverScrollableScrollPhysics(),
child: Column(
// mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: DeviceSize.height(context) / 6,
width: DeviceSize.width(context),
child: ListView.builder(
itemCount: homeTestTypeModel.length,
scrollDirection: Axis.horizontal,
shrinkWrap: true,
itemBuilder: (BuildContext context, int index) {
return _buildHomeTestModel(
homeTestTypeModel[index]);
}),
),
Container(
padding: EdgeInsets.only(top: 20, left: 15, right: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Flexible(
child: Text(
'Tests Panel',
style: TextStyle(
fontFamily: 'Roboto Medium',
fontWeight: FontWeight.w700,
fontSize: 13.0),
),
),
Flexible(
child: Text(
'See all',
style: TextStyle(
fontFamily: 'Roboto Regular',
color: AppTheme.color1,
fontSize: 13.0,
fontWeight: FontWeight.w600),
),
),
],
),
),
Container(
height: DeviceSize.height(context),
padding: EdgeInsets.only(left: 15, right: 15),
child: ListView.builder(
itemCount: homeTestPanelModel.length,
scrollDirection: Axis.vertical,
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return _buildHomeTestPanelModel(
homeTestPanelModel[index]);
}),
),
],
),
),
),
],
),
),
);
}
Widget _buildHomeScreenBackground(HomeScreenBackground items) {
return Container(
width: DeviceSize.width(context),
child: Image.asset(
items.img,
height: DeviceSize.height(context) / 2.8,
width: DeviceSize.width(context),
fit: BoxFit.fill,
),
);
}
Widget _buildHomeTestModel(HomeTestTypeModel items) {
return Container(
padding: EdgeInsets.only(left: 30, top: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
child: CircleAvatar(
backgroundColor: AppTheme.color3.withOpacity(0.2),
maxRadius: 30,
child: Image.asset(
items.img,
scale: 6,
),
)),
// / SizedBox(height:DeviceSize.height(context)/30,),
Flexible(
child: Text(
items.title,
style: TextStyle(
fontSize: DeviceSize.height(context) / 60,
fontWeight: FontWeight.w700,
fontFamily: 'Roboto Medium'),
),
),
],
),
);
}
Widget _buildHomeTestPanelModel(HomeTestPanelModel items) {
return Container(
height: DeviceSize.height(context) / 10,
child: Card(
child: Padding(
padding: EdgeInsets.all(6),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Container(
height: 60,
width: 60,
padding: EdgeInsets.all(5),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(4)),
color: AppTheme.color3.withOpacity(0.2),
),
child: Image.asset(
items.img,
scale: 10,
),
),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: Text(
items.title,
style: TextStyle(
fontSize: DeviceSize.height(context) / 60,
fontWeight: FontWeight.w700,
fontFamily: 'Roboto Medium'),
),
),
Flexible(
child: Text(
items.subTitle,
style: TextStyle(
fontSize: DeviceSize.height(context) / 60,
fontWeight: FontWeight.w700,
fontFamily: 'Roboto Medium',
color: AppTheme.color1),
),
),
],
),
],
),
Icon(
Icons.arrow_forward_ios,
size: 15,
)
],
),
),
),
);
}
}Conclusion:
In this article, I have explained Adaptive Apps In Flutter, which you can modify and experiment with according to your own, this little introduction was from the Adaptive Apps In Flutter demo from our side.
I hope this blog will provide you with sufficient information in Trying up the Adaptive Apps In Flutter in your flutter project. We showed you what the Adaptive Apps 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.
