I have to create a vertical left side fixed vertical bar, something like this
I have created using TabBar but there is a lot extra work that needs to be done. Like I have to remove the blur hover effect on it and then on click of tabBar item should display its corresponding content in the center and it should be scrollable, if content is more.
You can copy paste run full code below
You can use NavigationRail
You can change NavigationRailDestination
's icon
and selectedIcon
icon
and selectedIcon
accept widget
, so you can use Column
wrap icon
and Text
per your request
code snippet
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon: Column(
children: [Icon(Icons.favorite_border), Text('Button 1')],
),
selectedIcon: Container(
color: Colors.green,
child: Column(
children: [Icon(Icons.favorite_border), Text('Button 1')],
),
),
label: Text(""),
),
NavigationRailDestination(
icon: Column(
children: [Icon(Icons.bookmark_border), Text('Button 2')],
),
selectedIcon: Column(
children: [Icon(Icons.book), Text('2 clicked')],
),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: MyStatefulWidget(),
);
}
}
/// This is the stateful widget that the main application instantiates.
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
/// This is the private State class that goes with MyStatefulWidget.
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon: Column(
children: [Icon(Icons.favorite_border), Text('Button 1')],
),
selectedIcon: Container(
color: Colors.green,
child: Column(
children: [Icon(Icons.favorite_border), Text('Button 1')],
),
),
label: Text(""),
),
NavigationRailDestination(
icon: Column(
children: [Icon(Icons.bookmark_border), Text('Button 2')],
),
selectedIcon: Column(
children: [Icon(Icons.book), Text('2 clicked')],
),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text('Third'),
),
],
),
VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Center(
child: Text('selectedIndex: $_selectedIndex'),
),
)
],
),
);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.