Как реализовать адаптивный и отзывчивый NavBar во Flutter?

Опубликовано: 10 Января, 2023

NavigationBar в веб-приложениях играет решающую роль. И разные фреймворки имеют разные стили для реализации. Во Flutter мы должны упоминать по-разному как для мобильных устройств, так и для веб-сайтов. Но мы можем реализовать те же элементы навигации в ящике с этим пакетом Adaptive_navbar во Flutter.

Как реализовать адаптивную панель навигации во Flutter

Добавление зависимости

Добавьте эту зависимость в файл pubspec.yaml .

dependencies:
  adaptive_navbar: ^0.0.1 #check for latest in versions at https://pub.dev/packages/adaptive_navbar/versions

Или вы можете просто запустить следующую команду в своем терминале в каталоге проекта, чтобы напрямую добавить ее в свою зависимость.

$ flutter pub add adaptive_navbar

импорт

Импортируйте навигационную панель в ваше приложение флаттера.

import "package:adaptive_navbar/adaptive_navbar";

NavBarItem

NavBarItem принимает в качестве аргументов текст и функцию для onTap. В зависимости от размера экрана AdaptiveNavbar решает, отображать ли значок меню в правом верхнем углу или элементы панели навигации на панели навигации.

Пример

Следуйте этому примеру, чтобы понять, как работает AdaptiveNavbar .

Dart

import "package:flutter/material.dart";
import "package:adaptive_navbar/adaptive_navbar.dart";
  
void main() {
  runApp(const MyApp());
}
  
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Adaptive NavBar",
      home: HomePage(),
    );
  }
}
  
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    final sw = MediaQuery.of(context).size.width;
  
    return Scaffold(
      appBar: AdaptiveNavBar(
        screenWidth: sw,
        title: const Text("Adaptive NavBar"),
        navBarItems: [
          NavBarItem(
            text: "Home",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
          NavBarItem(
            text: "About Us",
            onTap: () {
              Navigator.pushNamed(context, "routeName");
            },
          ),
        ],
      ),
      body: const Center(
        child: Text(
          "This package, "ADAPTIVE NAVBAR", was developed by Mouli Bheemaneti.",
        ),
      ),
    );
  }
}

Выход:

Flutter Dart

Как реализовать адаптивный и отзывчивый NavBar во Flutter?

Как реализовать адаптивную панель навигации во Flutter

Пример

Dart

РЕКОМЕНДУЕМЫЕ СТАТЬИ