[Flutter] 기능 샘플링

최재원

Jul 30, 2025

Contents

1. 모르는 기능 찾기 2. 해당 기능을 문서에서 코드 복사 3. 내 새 프로젝트에서 실행 4. 하나 하나 건드려보기 1. 탭 제거 2. 필요한 형태로 만들어보기 3. 필요한 부분 모듈로 빼기

💡

내 시간 견적을 알기 위해 샘플링을 해봐야 한다

1. 모르는 기능 찾기

프로젝트 이미지 등록

2. 해당 기능을 문서에서 코드 복사

3. 내 새 프로젝트에서 실행

4. 하나 하나 건드려보기

1. 탭 제거

DefaultTabController

2. 필요한 형태로 만들어보기


import 'package:flutter/material.dart';

/// Flutter code sample for [TabBar].

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: TabBarExample());
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TabBar Sample'),
      ),
      body: Column(
        children: [
          Container(
            height: 300,
            color: Colors.yellow,
          ),

          Expanded(
            child: DefaultTabController(
              length: 2,
              initialIndex: 1,
              child: Column(
                children: [
                  TabBar(
                    tabs: <Widget>[
                      Tab(icon: Icon(Icons.cloud_outlined)),
                      Tab(icon: Icon(Icons.beach_access_sharp)),
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Center(child: Text("It's cloudy here")),
                        Center(child: Text("It's rainy here")),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

3. 필요한 부분 모듈로 빼기


          Expanded(
            child: DefaultTabController(
              length: 2,
              initialIndex: 1,
              child: Column(
                children: [
                  TabBar(
                    tabs: <Widget>[
                      Tab(icon: Icon(Icons.cloud_outlined)),
                      Tab(icon: Icon(Icons.beach_access_sharp)),
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Center(child: Text("It's cloudy here")),
                        Center(child: Text("It's rainy here")),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          )