JavaScriptを有効にしてください

【Flutter】NavigationRail を使ってサイドメニューを実装する

 ·  ☕ 2 分で読めます

【Flutter】NavigationRail を使ってサイドメニューを実装する

Flutter で NavigationRail を使ってサイドメニューを実装するサンプル

サンプル

DartPad を使用すればブラウザ上で下記のコードを実行して確認できます。

NavigationRail を使って各ページを表示するようにしています。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  const MyWidget({super.key});

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int _selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: [
          // サイドバー(NavigationRail)
          NavigationRail(
            destinations: const [
              NavigationRailDestination(
                icon: Icon(Icons.home),
                label: Text('Home'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.bookmark),
                label: Text('Bookmark'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.people),
                label: Text('Friends'),
              ),
            ],
            selectedIndex: _selectedIndex,
            onDestinationSelected: (index) {
              setState(() {
                _selectedIndex = index;
              });
            },
          ),
          SelectContent(index: _selectedIndex)
        ],
      ),
    );
  }
}

/// Select Content Main Display
class SelectContent extends StatelessWidget {
  const SelectContent({super.key, required this.index});

  final int index;

  @override
  Widget build(BuildContext context) {
    const List<Widget> _pages = [Home(), Bookmark(), Friend()];
    if (_pages.length <= index) {
      return _pages[0];
    }
    return _pages[index];
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ColoredBox(
        color: Color.fromARGB(255, 146, 204, 252)!,
        child: const Center(
          child: Text('Home'),
        ),
      ),
    );
  }
}

/// Bookmark Page
class Bookmark extends StatelessWidget {
  const Bookmark({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ColoredBox(
        color: Color.fromARGB(255, 255, 0, 0)!,
        child: const Center(
          child: Text('Bookmark'),
        ),
      ),
    );
  }
}

/// Friend Page
class Friend extends StatelessWidget {
  const Friend({super.key});

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ColoredBox(
        color: Color.fromARGB(255, 78, 255, 43)!,
        child: const Center(
          child: Text('Friend'),
        ),
      ),
    );
  }
}

参考

共有

こぴぺたん
著者
こぴぺたん
Copy & Paste Engineer