A package that contains a component for adaptive switching between BottomNavigationBar
, NavigationRail
, and Drawer
.
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.
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.
Now in your Dart code, you can use:
import 'package:adaptive_navigation/adaptive_navigation.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