flutter: My last data is hiding behind the navigation bar

Viewed 103

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.

enter image description here

in redmi 4. It looks like it enter image description here

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(),
                ],
              ),
            ),
          ],
        ),
      ),
    ),
  );
}
2 Answers

wrap the column widget into singalchildscrollview widget

 body: SafeArea(
singlechildscrollview(
        child: Column(
          children: [
            TopCard(),
       ],
       ),
       ),

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

Related