[Flutter] NavigationRail 위젯

🍕 공식채널소개

 

 

🍕공식문서

NavigationRail class - material library - Dart API

Material Design에서 NavigationBar를 처리할 경우, 편리하게 사용할 수 있는 위젯이다.

 

 

---

예제소스

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

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

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;
  
  TextEditingController nameController = TextEditingController();
  String fullName = '';

  late List<Widget>  selectedMainView;


  @override
  void initState() {
    // 선택한 화면 
    selectedMainView = <Widget>[
      Text( '메인화면', style: TextStyle(fontSize: 25),), 
      Image.network('https://avatars.githubusercontent.com/u/31234716?v=4'), 
      inputWidget()
    ];

    super.initState();
  }

  Container inputWidget() {
    return Container(
      margin: EdgeInsets.all(40),
      child: TextField(
        controller: nameController,
        decoration: InputDecoration(
          border: OutlineInputBorder(),
          labelText: '이름입력',
        ),
        onChanged: (text) {
          setState(() {
            fullName = text;
          });
        }
      ),
    );
  }


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        children: <Widget>[
          NavigationRail(
            selectedIndex: _selectedIndex,
            onDestinationSelected: (int index) {
              setState(() {
                _selectedIndex = index;
              });
            },
            labelType: NavigationRailLabelType.selected,
            destinations: const <NavigationRailDestination>[
              NavigationRailDestination(
                icon: Icon(Icons.home),
                selectedIcon: Icon(Icons.home),
                label: Text('메인'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.person),
                selectedIcon: Icon(Icons.person),
                label: Text('정보'),
              ),
              NavigationRailDestination(
                icon: Icon(Icons.input),
                selectedIcon: Icon(Icons.input),
                label: Text('입력'),
              ),
            ],
          ),
          const VerticalDivider(thickness: 1, width: 1),
          // This is the main content.
          Expanded(
            child: Center(
              child: selectedMainView[_selectedIndex],
            ),
          )
        ],
      ),
    );
  }
}

 

[dartpad]