Let's say I have the following NavigationRail:
I'm aware that this widget is quite new, and as such, its functionality may be limited. However, I'd like to know if there's any way to reduce the height of each element in a NavigationRail, such as the element I indicated on the image above, as it seems that the parameters in the NavigationRail widget don't allow for such a thing as of now.
EDIT: I did what chunhunghan told, and even so, the problem still persists. Even using a container, the width and the height of each element remains the same. My code:
class _HomePageState extends ModularState<HomePage, HomeController> {
int selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Row(
children: [
NavigationRail(
onDestinationSelected: (index) {
selectedIndex = index;
},
backgroundColor: navigationRailColor,
selectedIndex: selectedIndex,
destinations: [
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text(''),
),
],
)
],
),
);
}
}
How it looks:
You can copy paste run full code below
You can use Container
wrap icon
and provide height
I use a large value 200 for demo purpose
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget 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(),
);
}
}
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
@override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("demo"),
),
body: Row(
children: <Widget>[
NavigationRail(
selectedIndex: _selectedIndex,
onDestinationSelected: (int index) {
setState(() {
_selectedIndex = index;
});
},
labelType: NavigationRailLabelType.selected,
destinations: [
NavigationRailDestination(
icon:
Container(height: 200, child: Icon(Icons.favorite_border)),
selectedIcon:
Container(height: 200, child: Icon(Icons.favorite)),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.bookmark_border),
selectedIcon: Icon(Icons.book),
label: Text(''),
),
NavigationRailDestination(
icon: Icon(Icons.star_border),
selectedIcon: Icon(Icons.star),
label: Text(''),
),
],
),
VerticalDivider(thickness: 1, width: 1),
// This is the main content.
Expanded(
child: Center(
child: Text('selectedIndex: $_selectedIndex'),
),
)
],
),
);
}
}