Flutter is Google’s popular cross-platform app development framework supporting devices with Responsive layouts. It eliminates the challenge of adapting the app to different screen sizes and pixel densities with the same code.
Responsive layout is the major highlight of Flutter. Although there is no hard rule for designing a responsive layout in Flutter, it is much better to hire flutter developer from Flutter Agency.
The experienced Flutter developer knows in-depth about Flutter and designs responsive layouts according to your needs. The experts mix and match various techniques, packages and widgets to make the Flutter app responsive. This article will teach you how to create split view and drawer navigation.
How to create the split view in Flutter
The split view in Flutter automatically splits the screen into two views based on the available space. It is a beneficial UX pattern making use of the available screen space on the bigger form factors.
The widgets will offer horizontal and vertical multiple split views for Flutter. The major benefit of accessing multiple split screens is that it helps maintain its own internal navigation stack, application and UI.
Usage
MaterialApp(
title: ‘SplitView Demo’,
home: SplitView.material(
child: MainPage(),
),
);
How to navigate?
Push
SplitView.of(context).push(SecondPage());
Here, push with the optional title can be accessed as the back button’s title.
SplitView.of(context).push(
SecondPage(),
title: ‘Second’,
);
Pop
SplitView.of(context).pop();
Here is how to pop until the n-th page:-
SplitView.of(context).popUntil(1);
How to set the page displayed in the secondary view (Responsive layouts)
SplitView.of(context).setSecondary(SecondPage());
It will clear the stack and then push the new page so it becomes the second page in the stack.
Check whether the secondary view is visible
SplitView.of(context).isSecondaryVisible;
How to implement the SplitView
Here is the code to create a simple SplitView widget with a single Responsive layouts breakpoint!
Import ‘package: flutter/material.dart’;
The import ‘package:split_view_example_flutter/app_menu.dart’;
Import ‘package:split_view_example_flutter/first_page.dart’;
class SplitView extends StatelessWidget {
@override
Widget build(BuildContext context) {
final screenWidth = MediaQuery.of(context).size.width;
const breakpoint = 600.0;
if (screenWidth >= breakpoint) {
return Row(
children: [
SizedBox(
width: 240,
child: AppMenu(),
),
Container(width: 0.5, color: Colors.black),
Expanded(
child: FirstPage(),
),
],
);
} else {
return Scaffold(
body: FirstPage(),
drawer: SizedBox(
width: 240,
child: Drawer(
child: AppMenu(),
),
),
);
}
}
}
It compares the screen width obtained from Media Query with the constant breakpoint. When the screen width exceeds 600 points, it returns the row layout with AppMenu on the left and FirstPage on the right. Or else, it returns the Scaffold with the FirstPage as the body and the drawer (child: AppMenu()) as the drawer.
When you want the menu to have a width proportional to the screen width in the split view mode, you should replace SizedBox with the expanded widget. It also tweaks the flex value of both expanded widgets. You can resize the window and see the top-level layout changes when crossing the breakpoint value of 600 points upon passing SplitView() as the home of MaterialApp() and running the app on the desktop.
Remember that the SplitView widget rebuilds whenever the window size changes. It is because you call MediaQuery.of (context) in the build() method. You can utilize this function to query the orientation and size of the screen. If that information changes, your widget will schedule to be rebuilt and keep the widget updated. But, at the same time, this widget is not reusable because menu width, breakpoint, content and menu widgets are hard-coded.
You can do it much better by introducing two Widget properties, “menu and content”. You must choose all the parent widgets and decide on SplitView. Now, the breakpoint and menuWidth are configurable properties with the default values.
Drawer navigation in Flutter
In Flutter, drawer navigation lets users navigate to various pages of your app. It is added with the help of a drawer widget. It can open by tapping on the menu icon or through a swipe gesture in the app bar.
Usually, the navigation drawer opens up from the screen’s left side. However, you can configure it to open from the right side. If it opens, the drawer covers 60 to 70 per cent of the screen. Swipe or click outside the drawer to close it.
The navigation drawer can be used as an alternate option to the TabBar widget. It is highly suggested to utilize the navigation drawer, especially if you have at least five pages to navigate. Whenever the app has several pages, rendering the navigation inside the TabBar offers a less intuitive user experience.
Here is how to add the navigation drawer in Flutter successfully:
You should use MaterialApp in the property to add the basic navigation drawer in Flutter. After that, the drawer widget can add to the Scaffold widget. These are the step-by-step instructions to add the navigation drawer in Flutter.
- Ensure you use MaterialApp
- Inside the Scaffold, you must add the drawer property and then assign the drawer widget
- Add the ListView as the child widget inside the drawer widget
- Add the DrawerHeader widget inside the ListView that will create the material design drawer header
- Inside the DrawerHeader, you can add the text widget with specific text
- Add the ListTile widget with the title and icon representing a single page below the draweheader
- Likewise, you can add other ListTile for other pages.
Code example of the navigation drawer
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text(
‘Navigation Drawer’,
),
backgroundColor: const Color(0xff764abc),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: [
const DrawerHeader(
decoration: BoxDecoration(
color: Colors.blue,
),
child: Text(‘Drawer Header’),
),
ListTile(
leading: Icon(
Icons.home,
),
title: const Text(‘Page 1’),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
leading: Icon(
Icons.train,
),
title: const Text(‘Page 2’),
onTap: () {
Navigator.pop(context);
},
),
],
),
),
body: Center(
child: Column(
children: [
SizedBox(
height: 50,
),
],
),
),
);
}
You can add “UserAccountsDrawerHeader” to display all the user-related information like username and email in the navigation drawer.
Bottom line
You now understand how to add the navigation drawer and spilt view in Flutter with code examples. You can add the basic split view and drawer navigation and gradually move towards Responsive layouts and customized drawers.
If you still need help to go in-depth, you can hire Flutter developer. The experienced flutter developer will understand your requirements and provide the necessary assistance to meet your needs.