A Flutter Package Providing Adaptive Switching

A package that contains a component for adaptive switching between BottomNavigationBar, NavigationRail, and Drawer.

Demo

Note This is an opinionated implementation of adaptive navigation in Material. While there are some basic options for switching the adaptive behavior, it is not meant to support advanced or custom configurations. For example, if you need an extended Navigation Rail or a Drawer with custom actions, this package should not be used. It can still, however, be used a reference for breakpoint logic and navigation destination mapping.

Use this package as a library

Depend on it

Run this command:

With Flutter:

 $ flutter pub add adaptive_navigation

This will add a line like this to your package's pubspec.yaml (and run an implicit flutter pub get):

dependencies:
  adaptive_navigation: ^0.0.9

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

Import it

Now in your Dart code, you can use:

import 'package:adaptive_navigation/adaptive_navigation.dart';

example/lib/main.dart

import 'package:flutter/material.dart';

import 'custom_scaffold.dart';
import 'default_scaffold.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(
      title: 'Adaptive Navigation Scaffold Demo',
      home: DemoSelector(),
    );
  }
}

class DemoSelector extends StatelessWidget {
  const DemoSelector({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text('Default Scaffold'),
              onPressed: () {
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (context) {
                      return const DefaultScaffoldDemo();
                    },
                  ),
                );
              },
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              child: const Text('Custom Scaffold'),
              onPressed: () {
                Navigator.of(context).pushReplacement(
                  MaterialPageRoute(
                    builder: (context) {
                      return const CustomScaffoldDemo();
                    },
                  ),
                );
              },
            )
          ],
        ),
      ),
    );
  }
}

Download details:

Author: material.io

Source: https://github.com/material-foundation/flutter-packages/tree/main/packages/adaptive_navigation

#flutter #android #ios #mobile #web-development #web