如何使用 flutter 中的容器创建垂直固定自定义标签栏

Question

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.

Answer 1

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'),
            ),
          )
        ],
      ),
    );
  }
}