May

Flutter Mobile Sidebar

Flutter Mobile Sidebar:

In this tutorial, we are going to learn to create a mobile sidebar in Flutter. A sidebar is exactly what it contains like. It contains an important piece, important categories or text that describes a longer article in a publication such as a magazine or newspaper or e-commerce product categories, etc. A sidebar always appears on the side of an article, hence the name sidebar.

Creating Mobile Sidebar in Flutter:

Add the dependency package:

To create Mobile sidebar we need to add the dependency package to pubspec.yaml file. use the below code to add dependency package. After adding the dependency package run the get package method to import all the required files to the app.

dependencies:
mobile_sidebar: ^1.6.0

Install the package:

You can install the package from the command line using the below code with Flutter as shown.

$ flutter packages get

Importing the Package:

After, Adding the dependency package to the pubspec.yaml file, you can now import the package into the dart code by using the below code. without adding the dependency package to the pubspec.yaml file if you import it will show package not found an error.

import 'package:mobile_sidebar/mobile_sidebar.dart';

Complete Example Code for Creating Mobile Sidebar In Flutter:

import 'dart:io';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

import 'package:mobile_sidebar/mobile_sidebar.dart';

void main() {
_setTargetPlatformForDesktop();
runApp(MyApp());
}

/// If the current platform is desktop, override the default platform to
/// a supported platform (iOS for macOS, Android for Linux and Windows).
/// Otherwise, do nothing.
void _setTargetPlatformForDesktop() {
TargetPlatform targetPlatform;
if (Platform.isMacOS) {
targetPlatform = TargetPlatform.iOS;
} else if (Platform.isLinux || Platform.isWindows) {
targetPlatform = TargetPlatform.android;
}
if (targetPlatform != null) {
debugDefaultTargetPlatformOverride = targetPlatform;
}
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: new HomeScreen(),
);
}
}

class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State {
bool _showList = false;
bool _bottomNav = false;
final _breakpoint = 800.0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: !_bottomNav
? AppBar(
title: Text('Mobile Sidebar Example'),
)
: null,
body: MobileSidebar(
breakPoint: _breakpoint,
persistIndex: true,
mobileBottomNavigation: _bottomNav,
nestedNavigation: true,
items: [
MenuItem(
icon: Icons.edit,
color: Colors.black,
title: 'Manage',
subtitle: 'Edit, Share, Delete',
child: NewScreen(
color: Colors.blueAccent,
name: 'Blue Screen',
),
),
MenuItem(
icon: Icons.event,
color: Colors.blueAccent,
title: 'Tasks',
subtitle: 'Personal Tasks',
child: NewScreen(
color: Colors.purpleAccent,
name: 'Purple Screen',
),
),
MenuItem(
icon: Icons.timer,
color: Colors.blueGrey,
title: 'Log',
subtitle: 'History of Results',
child: NewScreen(
color: Colors.black,
name: 'Black Screen',
),
),
MenuItem(
icon: Icons.star,
color: Colors.amber,
title: 'Favorites',
subtitle: 'Custom List',
child: NewScreen(
color: Colors.yellow,
name: 'Yellow Screen',
),
),
MenuItem(
icon: Icons.inbox,
color: Colors.green,
title: 'Green',
subtitle: 'Green Screen',
child: NewScreen(
color: Colors.green,
name: 'Green Screen',
),
),
MenuItem(
icon: Icons.perm_camera_mic,
color: Colors.brown,
title: 'Brown',
subtitle: 'Brown Screen',
child: NewScreen(
color: Colors.brown,
name: 'Brown Screen',
),
),
MenuItem(
icon: Icons.bluetooth,
color: Colors.lightBlue,
title: 'Light Blue',
subtitle: 'Light Blue Screen',
child: NewScreen(
color: Colors.lightBlue,
name: 'Light Blue Screen',
),
),
],
showList: _showList,
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
floatingActionButton: FloatingActionButton.extended(
backgroundColor: Colors.redAccent,
heroTag: 'toggle_grid',
label: Text('${_bottomNav ? 'Hide' : 'Show'} Bottom Bar'),
icon: Icon(Icons.border_bottom),
onPressed: () {
if (mounted)
setState(() {
_bottomNav = !_bottomNav;
});
},
),
),
);
}
}

class NewScreen extends StatelessWidget {
const NewScreen({
Key key,
@required this.color,
@required this.name,
}) : super(key: key);

final Color color;
final String name;

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('$name'),
),
body: Container(
color: color,
child: Center(
child: RaisedButton.icon(
icon: Icon(Icons.arrow_right),
label: Text("Push to Screen"),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(
builder: (_) => NewScreen(color: color, name: name),
));
},
),
),
),
);
}
}

Congratulations You Have Learned Creating Mobile Sidebar In Flutter….!!!

If It Is Helpful Share It With Your Friends….!!!

PrevNext