I'm trying to create a fully responsive design. I'm facing the overflow issue when I resize my screen from bottom to top(Vertically) or top to bottom in desktop view. And I face horizontal responsiveness overflow from right and bottom sides, if I shrink the window size to much. There are two things 1rst I think the issue will be resolve with scrollbars, but I'm not able to add scrollbars. 2nd I would like to have a solution(or method, or widgets) for all type of responsiveness(horizontal and vertical) ,as soon as possible.
Normal Desktop View
Bottom Over Flow Issue when I resize Vertically
Normal Mobile View
Vertical and Horizontal Over Flow Issue after Resizing
Flutter Doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, 2.10.0, on Microsoft Windows [Version 10.0.22000.318], locale en-PK)
[√] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
[√] Chrome - develop for the web
[√] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.0.5)
[√] Android Studio (version 2021.1)
[√] VS Code (version 1.64.0)
[√] Connected device (3 available)
[√] HTTP Host Availability
• No issues found!
Web_Screen Code
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:g_res_p/colors/colors.dart';
import 'package:g_res_p/widgets/search.dart';
import 'package:g_res_p/widgets/webButtons/search_button1.dart';
import 'package:g_res_p/widgets/webButtons/translation_btn.dart';
import 'package:g_res_p/widgets/webButtons/upper_web_footer.dart';
import 'package:g_res_p/widgets/webButtons/web_footer.dart';
class WebScreenLayout extends StatelessWidget {
const WebScreenLayout({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
backgroundColor: backgroundColor,
elevation: 0,
actions: [
TextButton(
onPressed: () {},
child: const Text(
'Gmail',
style: TextStyle(
color: primaryColor,
fontWeight: FontWeight.w400,
),
),
),
const SizedBox(
width: 10,
),
TextButton(
onPressed: () {},
child: const Text(
'Images',
style: TextStyle(
color: primaryColor,
fontWeight: FontWeight.w400,
),
),
),
const SizedBox(
width: 10,
),
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/more-apps.svg',
color: primaryColor,
),
),
const SizedBox(
width: 10,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0).copyWith(
right: 10,
),
child: MaterialButton(
onPressed: () {},
color: const Color(
0xff1A73EB,
),
child: const Text(
'Sign in',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
body: Padding(
padding: const EdgeInsets.only(),
child: Column(
children: [
SizedBox(
height: size.height * 0.25,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: const [
Search(),
SizedBox(
height: 20,
),
SearchButton1(),
SizedBox(
height: 20,
),
TranslationButtons(),
],
),
Column(
children: const [
UpperWebFooter(),
Divider(
height: 1,
color: dividerColor,
),
WebFooter(),
],
),
],
),
),
],
),
),
);
}
}
Mobile_Screen Code
import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'package:g_res_p/colors/colors.dart';
import 'package:g_res_p/widgets/mobile/mobiel_footer.dart';
import 'package:g_res_p/widgets/search.dart';
import 'package:g_res_p/widgets/webButtons/search_button1.dart';
import 'package:g_res_p/widgets/webButtons/translation_btn.dart';
import 'package:g_res_p/widgets/webButtons/upper_web_footer.dart';
class MobileScreenLayout extends StatelessWidget {
const MobileScreenLayout({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
appBar: AppBar(
backgroundColor: backgroundColor,
elevation: 0,
leading: IconButton(
onPressed: () {},
icon: const Icon(
Icons.menu,
color: Colors.grey,
),
),
title: SizedBox(
width: size.width * 0.34,
child: const DefaultTabController(
length: 2,
child: TabBar(
indicatorColor: blueColor,
unselectedLabelColor: Colors.grey,
labelColor: blueColor,
indicatorSize: TabBarIndicatorSize.label,
tabs: [
Tab(
text: 'All',
),
Tab(
text: 'Images',
),
],
),
),
),
actions: [
IconButton(
onPressed: () {},
icon: SvgPicture.asset(
'assets/images/more-apps.svg',
color: primaryColor,
),
),
const SizedBox(
width: 10,
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 10.0).copyWith(
right: 10,
),
child: MaterialButton(
onPressed: () {},
color: const Color(
0xff1A73EB,
),
child: const Text(
'Sign in',
style: TextStyle(
color: Colors.white,
),
),
),
),
],
),
body: Padding(
padding: const EdgeInsets.only(),
child: Column(
children: [
SizedBox(
height: size.height * 0.25,
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: const [
Search(),
SizedBox(
height: 20,
),
SearchButton1(),
SizedBox(
height: 20,
),
TranslationButtons(),
],
),
Column(
children: const [
UpperWebFooter(),
Divider(
height: 1,
color: dividerColor,
),
MobileFooter(),
],
),
],
),
),
],
),
),
);
}
}
