Orientation aware widgets

Collection of usefull widgets having responsive behaviors depending on device orientation

Features

• 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.

Demo

ResponsiveNavigationRailOrBar

Android device	MacBook (macOS)

Usage

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

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

  @override
  void initState() {
    super.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'));

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

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

  @override
  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

• BottomNavigationBar
• NavigationRail

Contributing

We accept the following contributions:

• Documentation improvements
• Fixing bugs
• Reporting issues
• Suggestions