Flutter - AppBar, TabBar, TabBarView, BottomNavigationBar

• AppBar.TabBar.Tabarview

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
      ),
      home: const MyHomePage(title: 'Flutter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            bottom: const TabBar(
              tabs: <Widget>[
                Tab(
                  icon: Icon(Icons.home),
                  text: "홈",
                ),
                Tab(icon: Icon(Icons.contact_page), text: "정보"),
                Tab(icon: Icon(Icons.menu), text: "메뉴"),
              ],
            ),
          ),
          body: TabBarView(
            children: <Widget>[
              Container(
                color: Colors.red,
                child: const Text("Flutter",
                    style: TextStyle(color: Colors.white)),
              ),
              Container(
                color: Colors.blueGrey,
                child: const Text("Flutter",
                    style: TextStyle(color: Colors.white)),
              ),
              Container(
                color: Colors.yellow,
                child: const Text("Flutter",
                    style: TextStyle(color: Colors.white)),
              ),
            ],
          ),
        ));
  }
}

 

 

• BottomNavigationBar

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(),
      home: const MyHomePage(title: 'BottomNavigationBar'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  List<Widget> _widgets = [
    Text("Home"),
    Placeholder(),
    Text("Mypage"),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), label: "홈"),
          BottomNavigationBarItem(icon: Icon(Icons.notification_important_outlined), label: "알람"),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: "정보")
        ],
        onTap: _onItemTapped,
        currentIndex: _selectedIndex,
      ),
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: _widgets.elementAt(_selectedIndex),
      ),
    );
  }
}