orientation_aware_widgets

Description:

orientation aware widgets

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));
}
}
copied to clipboard
Additional information #

BottomNavigationBar
NavigationRail

Contributing #
We accept the following contributions:

Documentation improvements
Fixing bugs
Reporting issues
Suggestions