Flutter material3 getx 侧边栏

基于最新版本flutter3+新版material3实现,直接上代码 :

main.dart 

import 'package:flutter/material.dart';
import 'package:flutter_application_1/controller.dart';
import 'package:get/get.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(context) {
    // Instantiate your class using Get.put() to make it available for all "child" routes there.
    final Controller c = Get.put(Controller());
    final Controller r = Get.find();
    // int _selectedIndex = c.selectedIndex.value;
    NavigationRailLabelType labelType = NavigationRailLabelType.all;
    bool showLeading = false;
    bool showTrailing = false;
    double groupAlignment = -1.0;
    return Scaffold(
        // Use Obx(()=> to update Text() whenever count is changed.
        appBar: AppBar(title: Obx(() => Text("Clicks: ${c.count}"))),
        // Replace the 8 lines Navigator.push by a simple Get.to(). You don't need context
        body: Row(
          children: <Widget>[
            Obx(() => 
            NavigationRail( 
              selectedIndex: c.selectedIndex.toInt(),
              groupAlignment: groupAlignment,
              onDestinationSelected: (int index) {
                c.selectIt(index);
                print(c.selectedIndex.value);
                // setState(() {
                //   _selectedIndex = index;
                // });
              },
              labelType: labelType,
              leading: FloatingActionButton(
                      elevation: 0,
                      onPressed: () {
                        // Add your onPressed code here!
                      },
                      child: const Icon(Icons.add),
                    )
                  ,
              trailing: IconButton(
                      onPressed: () {
                        // Add your onPressed code here!
                      },
                      icon: const Icon(Icons.more_horiz_rounded),
                    ),
              destinations: const <NavigationRailDestination>[
                NavigationRailDestination(
                  icon: Icon(Icons.favorite_border),
                  selectedIcon: Icon(Icons.favorite),
                  label: Text('First'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.bookmark_border),
                  selectedIcon: Icon(Icons.book),
                  label: Text('Second'),
                ),
                NavigationRailDestination(
                  icon: Icon(Icons.star_border),
                  selectedIcon: Icon(Icons.star),
                  label: Text('Third'),
                ),
              ],
            )
            ),
            const VerticalDivider(thickness: 1, width: 1),
            // This is the main content.
            Expanded(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Obx(() => Text("Selected Index: ${c.selectedIndex}")),
                  const SizedBox(height: 20),
                  Text('Label type: ${labelType.name}'),
                  const SizedBox(height: 10),
                  OverflowBar(
                    spacing: 10.0,
                    children: <Widget>[
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   labelType = NavigationRailLabelType.none;
                          // });
                        },
                        child: const Text('None'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   labelType = NavigationRailLabelType.selected;
                          // });
                        },
                        child: const Text('Selected'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   labelType = NavigationRailLabelType.all;
                          // });
                        },
                        child: const Text('All'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),
                  Text('Group alignment: $groupAlignment'),
                  const SizedBox(height: 10),
                  OverflowBar(
                    spacing: 10.0,
                    children: <Widget>[
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   groupAlignment = -1.0;
                          // });
                        },
                        child: const Text('Top'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   groupAlignment = 0.0;
                          // });
                        },
                        child: const Text('Center'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   groupAlignment = 1.0;
                          // });
                        },
                        child: const Text('Bottom'),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20),
                  OverflowBar(
                    spacing: 10.0,
                    children: <Widget>[
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   showLeading = !showLeading;
                          // });
                        },
                        child:
                            Text(showLeading ? 'Hide Leading' : 'Show Leading'),
                      ),
                      ElevatedButton(
                        onPressed: () {
                          // setState(() {
                          //   showTrailing = !showTrailing;
                          // });
                        },
                        child: Text(
                            showTrailing ? 'Hide Trailing' : 'Show Trailing'),
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
        floatingActionButton: FloatingActionButton(
            onPressed: c.increment, child: const Icon(Icons.add)));
  }
}

controller.dart

import 'package:get/get.dart';

class Controller extends GetxController {
  var count = 0.obs;
  var selectedIndex = 0.obs;
  increment() => count++;
  selectIt(int index) => selectedIndex.value=index;
}

pubspec.yaml

name: flutter_application_1
description: A new Flutter project.
publish_to: 'none'
version: 0.1.0

environment:
  sdk: '>=3.1.0 <4.0.0'

dependencies:
  get:
  flutter:
    sdk: flutter

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true