Flutter TabBar

전체코드

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  TabBarSample createState() => TabBarSample();
}

class TabBarSample extends State<MyHomePage>{
  @override
  Widget build(BuildContext context){
    double appBarHeight = 50.0;
    return MaterialApp(
      home: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(appBarHeight),
          child:AppBar(
            title: Text('TapBar Demo'),
            backgroundColor: Colors.cyan,
          ),
        ),
        body: TabSlide([Red(), Green(), Blue()]),
      ),
    );
  }
}

//TabSlide widget
class TabSlide extends StatelessWidget{
  List<Widget> widgetList = List<Widget>();
  TabSlide([this.widgetList]);
  List<Text> textList = List<Text>();
  @override
  Widget build(BuildContext context){
    if(widgetList == null){
      widgetList = [Red(), Green(), Blue()];
    }
    textList.add(Text('R', style: TextStyle(fontSize: 20, color: Colors.red)));
    textList.add(Text('G', style: TextStyle(fontSize: 20, color: Colors.green)));
    textList.add(Text('B', style: TextStyle(fontSize: 20, color: Colors.blue)));

    return DefaultTabController(
      length: widgetList.length,
      child: Container(
        child: Column(
          children: <Widget>[
            TabBar(
              /*tabs: [
                Tab(child: Text('R', style: TextStyle(fontSize: 20, color: Colors.red))),
                Tab(child: Text('G', style: TextStyle(fontSize: 20, color: Colors.green))),
                Tab(child: Text('B', style: TextStyle(fontSize: 20, color: Colors.blue))),
              ]*/
              //간략하게 아래와 같이 한줄로 가능
              tabs: textList.map((Text _text){return Tab(icon: _text);}).toList(),
            ),
            Expanded(
              flex: 1,
              child: TabBarView(
              children: widgetList,
              ),
            ),
          ],
        )
      )
    );
  }
}

// Card 위젯 구현
class Red extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return Card(color: Colors.red);
  }
}

// Text 위젯 구현
class Green extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new LayoutBuilder(builder: (context, constraint) {
      double min = (constraint.biggest.width < constraint.biggest.height)
          ? constraint.biggest.width : constraint.biggest.height;
      return Container(
          width: constraint.biggest.width,
          height: constraint.biggest.height,
          color: Colors.green,
          child: Center(
              child: Text('GREEN',
                  style: TextStyle(fontSize: min / 4, color: Colors.white, decoration: TextDecoration.none, fontWeight: FontWeight.normal)
              )
          )
      );
    });
  }
}

// Icon 위젯 구현
class Blue extends StatelessWidget {
  @override
  Widget build(BuildContext context){
    return new LayoutBuilder(builder: (context, constraint) {
      double min = (constraint.biggest.width < constraint.biggest.height)
          ? constraint.biggest.width : constraint.biggest.height;
      return Container(
        width: constraint.biggest.width,
        height: constraint.biggest.height,
        color: Colors.blue,
        child: Icon(Icons.access_alarms, size: min / 2, color: Colors.white),
      );
    });
  }
}

Red, Green, Blue 에 대한 설명은 https://cdl-dev.tistory.com/10 참조

Flutter 기본 Widget 구현

 

TabSlide

class TabSlide extends StatelessWidget{
  List<Widget> widgetList = List<Widget>();
  TabSlide([this.widgetList]);
  List<Text> textList = List<Text>();
  @override
  Widget build(BuildContext context){
    if(widgetList == null){
      widgetList = [Red(), Green(), Blue()];
    }
    textList.add(Text('R', style: TextStyle(fontSize: 20, color: Colors.red)));
    textList.add(Text('G', style: TextStyle(fontSize: 20, color: Colors.green)));
    textList.add(Text('B', style: TextStyle(fontSize: 20, color: Colors.blue)));

    return DefaultTabController(
      length: widgetList.length,
      child: Container(
        child: Column(
          children: <Widget>[
            TabBar(
              /*tabs: [
                Tab(child: Text('R', style: TextStyle(fontSize: 20, color: Colors.red))),
                Tab(child: Text('G', style: TextStyle(fontSize: 20, color: Colors.green))),
                Tab(child: Text('B', style: TextStyle(fontSize: 20, color: Colors.blue))),
              ]*/
              //간략하게 아래와 같이 한줄로 가능
              tabs: textList.map((Text _text){return Tab(icon: _text);}).toList(),
            ),
            Expanded(
              flex: 1,
              child: TabBarView(
              children: widgetList,
              ),
            ),
          ],
        )
      )
    );
  }
}

TabBar

(cmd + B) TabBar의 요소들

 TabBar는 Click으로 Widget출력을 조절하는 공간이다. "tabs: " 요소에 WidgetList를 할당해야 하며 TabController객체, TabBarView 와 함께 쓰인다. (**TabBar의 "tabs: " 에 할당되는 Widget의 개수와 TabBarView의 "children: " 에 할당되는 Widget의 개수가 같아야 한다.) textList.map((Text _text){return Tab(icon: _text);}).toList() 는 textList에 있는 Text Widget을 _text를 통해 Tab Widget안에 할당하고 map으로 반환 한 후 List형식으로 다시 변환하는 것을 의미한다. (**textList를 바로 할당해도 가능한데 이렇게 번거롭게 한 이유는 Text형식으로 바로 반환 할 경우 fontSize만큼의 최소크기로 할당되어 여백이 없기 때문이다. Tab Widget은 기본적으로 할당된 iconMargin 이 있어 적절한 여백과 함께 출력된다.) return Tab(icon: _text) 에서 Tab의 "icon: " 요소는 Widget이다. Tab Widget에는 "text: " 요소가 따로 있지만 이 경우 String을 할당해야 하므로 Text Widget을 할당하기 위해서는 "icon: " 요소에 할당한다.

(cmd + B) Tab의 요소들

(왼쪽) tabs: textList.map((Text _text){return Tab(icon: _text);}).toList() / (오른쪽) tabs: textList

 

TabBarView

"children: " 에 WidgetList를 할당하여 각 Tab에 맞는 Widget을 출력한다. TabController객체, TabBar와 함께 쓰인다.

(cmd + B) TabBarView의 요소들

 

DefaultTabController

 TabController 종류 중 하나다. 일반적으로 TabBar와 TabBarView는 "controller: " 요소에 TabController 객체를 반드시 할당하여야 하지만 DefaultTabController를 사용하면 "length: " 요소에 Widget의 개수를 지정하고 "child: " 요소에 TabController 객체가 필요한 Widget을 할당할 수 있다.

(cmd + B) DefaultTabController의 요소들

Expanded

 Expanded 는 보통 Column, Row Widget 과 많이 쓰인다. Column 과 Row Widget 은 children 에 할당되는 Widget 들의 크기에 따라 자동으로 공간을 할당한다.(크기가 지정되지 않은경우 동일한 크기로 자동 할당) 이때 각 Widget의 부모에 Expanded Widget을 사용하고 "flex:" 에 값을 할당하면 할당된 flex 에 따라 비율을 조정한다.(위의 예제에서는 flex값에 상관없이 무조건 전체 크기를 할당받는다. 굳이 필요 없으나 유용한 기능인 것 같아 설명하기 위에 넣었다. 다른 예시는 https://cdl-dev.tistory.com/15 참조)

Flutter Column, Row _ Expanded, Stack

TabBar : TabBarView = 1 : 2

TabBar : TabBarView = 2 : 1

 

Tip 요약

** [T1 List].map((T1 _t){return T2([Widget이 필요한 요소]: _t);}).toList() : T1형식의 List를 T2형식의 List 로 변환

** DefaultTabController 의 "length: ", TabBar 의 "tabs: " 안의 Widget의 수, TabBarView 의 "children: " 안의 Widget의 수 가 같아야함