How can I build a responsive navbar using Flutter?

Question

I build a navbar for my website in Flutter as in the code below. All I want to do is to make this navbar responsive for mobile version. I want that in mobile version to show a menu icon and the text of my pages should disappear and I can see it when I click this menu icon. Does anyone knows how can I do this?

import 'package:flutter/material.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFF262533),
        body: ListView(
          children: [
            Stack(
              children: [
                Container(  
                  height: Get.height * .65, width: Get.width,       
                  color:  const Color(0xFF262533),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      const Padding(
                        padding: EdgeInsets.all(18.0),
                      ),
                      SizedBox(
                        height: 80,
                        width: 185,
                        child: Image.asset('assets/images/logo2.png'),
                      ),
                      const Spacer(),
                      const Text(
                        "Escorts",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                      const Text(
                        "Angenturen & Clubs",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                      const Text(
                        "Inserieren",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                      const Text(
                        "Werben",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                      const Text(
                        "Blog",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                      const Text(
                        "Kontakt",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 24,
                          fontFamily: 'Poppins',
                        ),
                      ),
                      const Spacer(),
                      const Icon(
                        Icons.attach_money,
                        color: Colors.white,
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      const Icon(
                        Icons.chat,
                        color: Colors.white,
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      const Icon(
                        Icons.person,
                        color: Colors.white,
                      ),
                      const SizedBox(
                        width: 20,
                      ),
                      const Icon(
                        Icons.search,
                        color: Colors.white,
                      ),
                      const SizedBox(
                        width: 32,
                      ),
                    ],
                  ),
                ),
              ],
            ),

Answer 1

- update

i just wrote an article about responsive layout. We ca use Padding, LayoutBuilder (like my answer below), and my best choice is with extension context.

here you can read it:

https://medium.easyread.co/3-options-for-creating-responsive-layouts-in-flutter-app-live-demo-68b0c0e955ab

---

you use LayoutBuilder() and create condition you need:

eg:

LayoutBuilder(builder: (context, constraints) {
  if (constraints.maxWidth >= 1500) {
    return desktopNavbar;
  } else if (constraints.maxWidth >= 650) {
    return tabletNavbar;
  } else {
    return mobileNavbar;
  }
});

create another component for each layout:

Widget mobileNavbar(){
 return Row(
  children: [ specific widget you want to show on mobile ]
 )
}

and so on for desktop or tablet.