FlutterError RenderCustomMultiChildLayoutBox object was given an infinite size during layout

Question

when adding the bottom navigation bar my body section is removed and got this error

ERROR:- FlutterError RenderCustomMultiChildLayoutBox object was given an infinite size during layout. This probably means that it is a render object that tries to be as big as possible, but it was put inside another render object that allows its children to pick their own size.

navigation.dart

import 'package:flutter/material.dart';
import 'package:convex_bottom_bar/convex_bottom_bar.dart';

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

 @override
  Widget build(BuildContext context) {
  return Scaffold(
  bottomNavigationBar: Container(
      height: 100,
      width: 100,
      margin: const EdgeInsets.only(left: 16, right: 16),
      decoration: const BoxDecoration(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(20),
        topRight: Radius.circular(20),
      )),
      child: ConvexAppBar(items: const [
        TabItem(
          icon: Icon(Icons.home),
        ),
        TabItem(icon: Icon(Icons.search)),
        TabItem(
          icon: Icon(Icons.add),
        ),
        TabItem(icon: Icon(Icons.favorite)),
        TabItem(icon: Icon(Icons.account_circle_rounded)),
      ], initialActiveIndex: 2)),
);
}
}

main.dart

import 'package:flutter/material.dart';
import 'widgets/navigation.dart';

void main() {
  runApp(const MaterialApp(
     home: MyApp(
   child: null,
  )));
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key, required child}) : super(key: key);

 @override
 Widget build(BuildContext context) {
   return Builder(builder: (context) {

     return Scaffold(
           body: Stack(
      fit: StackFit.loose,
      children: <Widget>[
            Positioned(
            bottom: 0,
            child: SizedBox(
              height: 50,
              child: Navigation(),
            ))
   ]
  ),
 ),
 }}}