orientation_aware_widgets 1.0.4

Device orientation aware widgets collection that combines existing Flutter compoments to simplify UI development.

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