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,
                      ),
                    ],
                  ),
                ),
              ],
            ),

CodePudding user response：

You should use Media Query to give height and width as it will set these properties according to the device size. You should be doing it like this.

like:

Container(
 height: MediaQuery.of(context).size.width * 0.65,
 width: MediaQuery.of(context).size.height * 0.65,
  ),

CodePudding user response：

try this use size class config

class SizeConfig {
  SizeConfig._();
  static final SizeConfig _instance = SizeConfig._();
  factory SizeConfig() => _instance;

  late MediaQueryData _mediaQueryData;
  late double screenWidth;
  late double screenHeight;
  late double blockSizeHorizontal;
  late double blockSizeVertical;
  late double _safeAreaHorizontal;
  late double _safeAreaVertical;
  late double safeBlockHorizontal;
  late double safeBlockVertical;
  double? profileDrawerWidth;
  late double refHeight;
  late double refWidth;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    refHeight = 1450;
    refWidth = 670;

    if (screenHeight < 1200) {
      blockSizeHorizontal = screenWidth / 100;
      blockSizeVertical = screenHeight / 100;

      _safeAreaHorizontal =
          _mediaQueryData.padding.left   _mediaQueryData.padding.right;
      _safeAreaVertical =
          _mediaQueryData.padding.top   _mediaQueryData.padding.bottom;
      safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 100;
      safeBlockVertical = (screenHeight - _safeAreaVertical) / 100;
    } else {
      blockSizeHorizontal = screenWidth / 120;
      blockSizeVertical = screenHeight / 120;

      _safeAreaHorizontal =
          _mediaQueryData.padding.left   _mediaQueryData.padding.right;
      _safeAreaVertical =
          _mediaQueryData.padding.top   _mediaQueryData.padding.bottom;
      safeBlockHorizontal = (screenWidth - _safeAreaHorizontal) / 120;
      safeBlockVertical = (screenHeight - _safeAreaVertical) / 120;
    }
  }

  double getWidthRatio(double val) {
    double res = (val / refWidth) * 100;
    double temp = res * blockSizeHorizontal;

    return temp;
  }

  double getHeightRatio(double val) {
    double res = (val / refHeight) * 100;
    double temp = res * blockSizeVertical;
    return temp;
  }

  double getFontRatio(double val) {
    double res = (val / refWidth) * 100;
    double temp = 0.0;
    if (screenWidth < screenHeight) {
      temp = res * safeBlockHorizontal;
    } else {
      temp = res * safeBlockVertical;
    }

    return temp;
  }
}

extension SizeUtils on num {
  double get toWidth => SizeConfig().getWidthRatio(toDouble());
  double get toHeight => SizeConfig().getHeightRatio(toDouble());
  double get toFont => SizeConfig().getFontRatio(toDouble());
}

CodePudding user response：

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.