Flutter TabBarView와 Expanded 사용하기

저번시간 TabBar에 이어서 이번에는 TabBarView와 Expanded을 사용해 볼 것이다

저번 시간 코드는 아래의 링크를 참조한다

https://initstory.tistory.com/118

 

1. practice_page.dart 코드 수정

practice_page.dart

import 'package:flutter/material.dart';
import 'package:flutter_practice/components/practice_tabbar.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black,
        leading: Icon(Icons.car_crash),
        title: Text("Appbar"),
        actions: [
          Icon(Icons.search),
        ],
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        child: Column(
          children: [
            Expanded(child: PracticeTabBar()),
          ],
        ),
      ),
    );
  }
}

 

2. TabBarView, Expanded

TabBarView는 TabBar를 클릭했을 때, 해당하는 tab에 맞는 화면을 뜻한다

practice_tabbar.dart

Expanded(
  child: TabBarView(
    controller: _tabController,
    children: [
      Container(color: Colors.green),
      Container(color: Colors.red),
    ],
  ),
),

Expanded는 남은 공간을 사용한다는 뜻이다

Expanded안에 TabBarView를 넣어주었다

 

3. 실행

 

 

 

4. Expanded 상세설명

practice_tabbar.dart

Expanded를 하나 더 추가해 보았다

결과는 빨간색 반, 노란색 반이 되었다

사이즈를 설정을 하지 않아도 남은 공간 반반씩 가져갔다

비율도 설정이 가능하다

flex를 사용해서 비율을 맞춰줄 수 있다

그리고 애뮬레이터화면 보다 사이즈가 더 크게 된다면 스크롤이 생기게 된다