bottomNavigationBar's area filled half on screen. How do I fix it?

Question

Thank you for checking :)

I don't know why the bottomnavigationbar's area filled half on screen. The bottomnavigationbar's area is filled black. I want the bottomnavigationbar to show for navigation only bottom area.

If I delete Expanded, the renderflex error is showing me..

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int visit = 0;
  double height = 30;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      bottomNavigationBar: BottomBarFloating(
          iconSize: 25,
        items: items,
        backgroundColor: Colors.white,
        color: Colors.black,
        colorSelected: PRIMARY_COLOR,
        indexSelected: visit,
        paddingVertical: 30,
        onTap: (int index) => setState(() {
        visit = index;
        }),
        ),
    );
  }
}

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Column(
            children: [
              const SizedBox(height: 250.0,),
              _SearchBox(),
              Expanded(child: MyHomePage(title: '')),
            ],
        ),
      ),
    );
  }
}

class DefaultLayout extends StatelessWidget {
  final Widget child;
  final String? title;

  const DefaultLayout({
    required this.child,
    this.title,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: child,
    );
  }

If I delete Expanded, the renderflex error is showing me..

How can I fix it?

Answer 1

Try this instead, use only one scaffold in a page

class MyHomePage extends StatefulWidget {


const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int visit = 0;
  double height = 30;

  @override
  Widget build(BuildContext context) {
    return Container(
      child: //your code here
    );
  }
}

class SearchOffScreen extends StatelessWidget {
  const SearchOffScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return DefaultLayout(
      child: SafeArea(
        top: true,
        bottom: false,
        child: Column(
            children: [
              const SizedBox(height: 250.0,),
              _SearchBox(),
              Expanded(child: MyHomePage(title: '')),
            ],
        ),
      ),
    );
  }
}

class DefaultLayout extends StatelessWidget {
  final Widget child;
  final String? title;

  const DefaultLayout({
    required this.child,
    this.title,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
      body: child,
      bottomNavigationBar: BottomBarFloating(
          iconSize: 25,
        items: items,
        backgroundColor: Colors.white,
        color: Colors.black,
        colorSelected: PRIMARY_COLOR,
        indexSelected: visit,
        paddingVertical: 30,
        onTap: (int index) => setState(() {
        visit = index;
        }),
      ),
    );
  }