How can I build a responsive navbar using Flutter?

Amarildo 0
Viewed 58

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

e

flutter-web flutter-animation flutter-dependencies flutter-layout flutter
4 Answers

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.

pmatatias0

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,
  ),
Nil Dervaliya0

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());
}
Nil Dervaliya0

To hide certain widgets based on screen you can just only include them when the screen is big enough. For example, simply replace

const Text(
  "Escorts",
  style: TextStyle(
    color: Colors.white,
    fontSize: 24,
    fontFamily: 'Poppins'
  )
)

with

if (Get.width > 1000) const Text(
  "Escorts",
  style: TextStyle(
    color: Colors.white,
    fontSize: 24,
    fontFamily: 'Poppins'
  )
)

Similarly you can only show the menu icon when the width is small enough

userR6m60
Related