flutter: My last data is hiding behind the navigation bar - flutter

Question

in redmi note 8 pro I got Bottom RenderFlex overflowed by 84 pixels. And My last data is hiding behind the navigation bar.
in redmi note 8 pro I got Bottom RenderFlex overflowed by 84 pixels. And My last data is hiding behind the navigation bar.
in redmi 4. It looks like it
This is my event section code
import 'package:cwc/constants/top_card.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/event_page_changer.dart';
import 'package:cwc/ui/Event/components/event_tab_view.dart';
import 'package:cwc/ui/Home/components/search_components.dart';
import 'package:cwc/ui/Home/home_page.dart';
import 'package:cwc/ui/footer/bottom_nav_bar.dart';
import 'package:cwc/ui/footer/bottom_nav_bar_event.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class Event extends StatefulWidget {
const Event({Key? key}) : super(key: key);
#override
_EventState createState() => _EventState();
}
class _EventState extends State<Event> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Color(0xff80CAD7),
body: SafeArea(
child: Column(
children: [
TopCard(),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0)),
),
child: EventTab())
// EventPageChanger(),
// Expanded(child: Activities()),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage()));
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Image.asset('assets/btnavico.png'),
elevation: 5.0,
highlightElevation: 10,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: Container(
// height: MediaQuery.of(context).size.height * (10 / 100),
child: BottomNavBarEvent()),
);
}
}
and this is my event tab secion code
import 'package:cwc/ui/CwcTv/components/slides/slide_component.dart';
import 'package:cwc/ui/CwcTv/components/videos/video_component.dart';
import 'package:cwc/ui/CwcTv/cwc_tv.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/category_page.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class EventTab extends StatefulWidget {
#override
_EventTabState createState() => _EventTabState();
}
class _EventTabState extends State<EventTab>
with SingleTickerProviderStateMixin, WidgetsBindingObserver {
TabController? controller;
#override
void initState() {
// TODO: implement initState
super.initState();
controller = TabController(length: 4, vsync: this);
controller!.addListener(_handleTabSelection);
WidgetsBinding.instance!.addObserver(this);
}
#override
void dispose() {
// TODO: implement dispose
super.dispose();
WidgetsBinding.instance!.removeObserver(this);
controller?.dispose();
}
void _handleTabSelection() {
setState(() {});
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
_tabSection(context, controller!),
],
);
}
}
Widget _tabSection(BuildContext context, TabController controller) {
return DefaultTabController(
length: 4,
child: SafeArea(
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 10, 0, 0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(14, 10, 14, 0),
child: TabBar(
controller: controller,
unselectedLabelColor: Colors.grey,
indicatorColor: Colors.white,
isScrollable: true,
tabs: [
Tab(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 66,
height: 32,
color: controller.index == 0
? Color(0xff158998)
: Color(0xffF1F2F6),
// decoration: const BoxDecoration(
// borderRadius: BorderRadius.all(Radius.circular(10)),
// ),
child: Center(
child: Text(
'All',
style: GoogleFonts.poppins(
color: controller.index == 0
? Color(0xffffffff)
: Color(0xff8F9698),
fontSize: 12,
),
),
),
),
),
),
Tab(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 85,
height: 32,
color: controller.index == 1
? Color(0xff158998)
: Color(0xffF1F2F6),
// decoration: const BoxDecoration(
// color: Color(0xffF1F2F6),
// borderRadius: BorderRadius.all(Radius.circular(10)),
// ),
child: Center(
child: Text(
'Category',
style: GoogleFonts.poppins(
color: controller.index == 1
? Color(0xffffffff)
: Color(0xff8F9698),
fontSize: 12,
),
),
),
),
),
),
Tab(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 85,
height: 32,
color: controller.index == 2
? Color(0xff158998)
: Color(0xffF1F2F6),
// decoration: const BoxDecoration(
// color: Color(0xffF1F2F6),
// borderRadius: BorderRadius.all(Radius.circular(10)),
// ),
child: Center(
child: Text(
'Upcoming',
style: GoogleFonts.poppins(
color: controller.index == 2
? Color(0xffffffff)
: Color(0xff8F9698),
fontSize: 12,
),
),
),
),
),
),
Tab(
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: Container(
width: 66,
height: 32,
color: controller.index == 3
? Color(0xff158998)
: Color(0xffF1F2F6),
// decoration: const BoxDecoration(
// color: Color(0xffF1F2F6),
// borderRadius: BorderRadius.all(Radius.circular(10)),
// ),
child: Center(
child: Text(
'Free',
style: GoogleFonts.poppins(
color: controller.index == 3
? Color(0xffffffff)
: Color(0xff8F9698),
fontSize: 12,
),
),
),
),
),
),
],
),
),
SizedBox(
height: MediaQuery.of(context).size.height * (50 / 100),
child: TabBarView(controller: controller,
children: const [
Activities(),
CategoryPage(),
Activities(),
Activities(),
],
),
),
],
),
),
),
);
}

Answer 1

wrap the column widget into singalchildscrollview widget
body: SafeArea(
singlechildscrollview(
child: Column(
children: [
TopCard(),
],
),
),

Answer 2

try the code down below
import 'package:cwc/constants/top_card.dart';
import 'package:cwc/ui/Event/components/activities.dart';
import 'package:cwc/ui/Event/components/event_page_changer.dart';
import 'package:cwc/ui/Event/components/event_tab_view.dart';
import 'package:cwc/ui/Home/components/search_components.dart';
import 'package:cwc/ui/Home/home_page.dart';
import 'package:cwc/ui/footer/bottom_nav_bar.dart';
import 'package:cwc/ui/footer/bottom_nav_bar_event.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class Event extends StatefulWidget {
const Event({Key? key}) : super(key: key);
#override
_EventState createState() => _EventState();
}
class _EventState extends State<Event> {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
backgroundColor: Color(0xff80CAD7),
body: SafeArea(
child: body: SingleChildScrollView(
child:Column(
children:[
TopCard(),
Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topRight: Radius.circular(24.0),
topLeft: Radius.circular(24.0)),
),
child: EventTab())
// EventPageChanger(),
// Expanded(child: Activities()),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
Navigator.pushReplacement(
context, MaterialPageRoute(builder: (context) => HomePage()));
},
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Image.asset('assets/btnavico.png'),
elevation: 5.0,
highlightElevation: 10,
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: Container(
// height: MediaQuery.of(context).size.height * (10 / 100),
child: BottomNavBarEvent()),
);
}
}
i just wrap the column with SingleChildScrollView
hope it will fix the problem