Orientation aware widgets

Collection of usefull widgets having responsive behaviors depending on device orientation

made-with-Markdown GitHub last commit GitHub


  • ResponsiveNavigationRailOrBar switch between a BottomNavigationBar (portrait) and a NavigationRail (landscape)

Getting started

The ResponsiveNavigationRailOrBar is a StatelessWidget so you need to manage yourself the state of the user selection and displayed content widget. The simplest way is using a StatefullWidget like the MyHomePage below.



Android device MacBook (macOS)


class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  State<MyHomePage> createState() => _MyHomePageState();

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;
  late Widget _child;

  void initState() {
    _child = _computeChild(_currentIndex);

  Widget _computeChild(int index) {
    switch (index) {
      case 0:
        return const Center(child: Text('Cloud is REMOTE'));
      case 1:
        return const Center(child: Text('Device is LOCAL'));

        if (kDebugMode) {
          print('unhandled child index $index, returning default');
        return const Text('REMOTE');

  void _onTap(int index) {
    setState(() {
      _child = _computeChild(index);
      _currentIndex = index;

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Responsive navigation rail or tabs')),
        body: ResponsiveNavigationRailOrBar(items: [
          NavigationChoices(text: 'Cloud', icon: const Icon(Icons.cloud)),
          NavigationChoices(text: 'Device', icon: const Icon(Icons.save_alt)),
        ], currentIndex: _currentIndex, onTap: _onTap, child: _child));

Additional information


We accept the following contributions:

  • Documentation improvements
  • Fixing bugs
  • Reporting issues
  • Suggestions