Floating bottom navbar in Dart

floating_bottom_nav_bar.dart

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

void main() {
  runApp(MaterialApp(home: HomePage()));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Some Text'),
      ),
      body: bodyContent,
      extendBody: true,
      bottomNavigationBar: bottomNavigationBar,
    );
  }

  Widget get bodyContent {
    return Center(child: Container(color: Colors.red));
  }

  Widget get bottomNavigationBar {
    return Padding(
    padding: EdgeInsets.all(16.0),
    child:  ClipRRect(
      borderRadius: BorderRadius.circular(40
      ),
      child: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: '1'),
          BottomNavigationBarItem(icon: Icon(Icons.usb), label: '2'),          
          BottomNavigationBarItem(icon: Icon(Icons.assignment_ind), label: '3'),
          BottomNavigationBarItem(icon: Icon(Icons.multiline_chart), label: '4'),
        ],
        unselectedItemColor: Colors.grey,
        selectedItemColor: Colors.black,
        showUnselectedLabels: true,
      ),
    )
    );
  }
}

Output: