Flutter TabBar

Flutter 설치하면 기본 설치되는 소스코드를 수정하여 탭으로 화면 구성하는 방법 연습하고 적어둔다.

TabController 생성 → TabBar 에 Tab 추가 → TabBarView에 각 Tab에 해당하는 콘텐츠 구성

 

import 'package:flutter/material.dart';
 
void main() {
  runApp(const MyApp());
}
 
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lightBlue,
        primaryColor: const Color(0xfff0c0f1),
        accentColor: const Color(0xfff0c0f1),
        canvasColor: const Color(0xFFfafafa),
      ),
      home: const MyHomePage(title: '플러터 데모 Main'),
    );
  }
}
 
// Android Studio 에서 stful 엔터를 치면 자동으로 만들어진다.
// 여기에서 클래스 이름만 지정하면 자동으로 만들어진다.
class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);
 
  final String title; // 선언한 변수는 final을 붙여야 한다.
 
  @override
  State<MyHomePage> createState() => _MyHomePageState();
// Stateless 위젯과 다른 점은 createState() 메소드를 통해
// 상태를 담당하는 클래스를 지정할 수 있다.
}
 
// 클래스 이름 앞에 _가 붙어 있으면 private 클래스로 본다.
// 다트에서는 Java와 같이 public, protected, private 같은 접근 제어자 키워드 없음
class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // _를 붙이면 private
 
  @override
  Widget build(BuildContext context) {
    // TabController 위젯으로 감싼다.
    return DefaultTabController(
        initialIndex: 1,
        length: 3, // 탭의 수 설정
        child: Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
            // TabBar 구현, 각 content를 호출할 탭들을 등록
            bottom: TabBar(
              tabs: <Widget>[
                Tab(icon: Icon(Icons.directions_car), text: '첫번째'),
                Tab(icon: Icon(Icons.directions_transit), text: "Transit"),
                Tab(
                  icon: Icon(Icons.directions_bike),
                  text: "Bike",
                ),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center, // 중앙정렬
                  children: <Widget>[
                    Text(
                      '당신은 버튼을 눌렀어요 :',
                      softWrap: false, // 텍스트가 영역을 넘어갈 경우 줄바꿈 여부
                      style: Theme.of(context).textTheme.headline5,
                    ),
                    Text(
                      '$_counter 번',
                      style: TextStyle(fontSize: 25),
                    ),
                  ],
                ),
              ),
              Center(
                child: Text("It's rainy here"),
              ),
              Icon(Icons.directions_bike),
            ],
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter, // 정의하고 alt + Enter 를 눌러서 메소드 생성
            tooltip: 'Increment',
            child: const Icon(Icons.add),
          ),
        ));
  }
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
}
 

 

참고하면 도움될 자료

https://www.woolha.com/tutorials/flutter-using-tabbar-tabbarview-examples

Flutter - Using TabBar & TabBarView Examples

https://blog.logrocket.com/flutter-tabbar-a-complete-tutorial-with-examples/#customizethetabindicatorintabbar

Flutter TabBar: A complete tutorial with examples - LogRocket Blog