[Flutter/Project](Instagram Clone) 탭 버튼 만들기

---

탭 버튼 아이콘

탭버튼 아래 인디케이터

home_page.dart

screen_size.dart

디바이스 화면 사이즈를 가져오는 구문을 post.dart 파일에서 home_page.dart 파일로 옮김.

변수 size를 어디서든 사용할 수 있게 post.dart 파일에서 빼내고 screen_size.dart 파일로 따로 생성.

---

소스코드

// widgets/profile_body.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/common_size.dart';
import 'package:flutter_project_IJ/constants/screen_size.dart';

class ProfileBody extends StatefulWidget {
  @override
  _ProfileBodyState createState() => _ProfileBodyState();
}

class _ProfileBodyState extends State<ProfileBody> {
  bool selectedLeft = true;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      // CustomScrollView()가 빈공간을 차지하도록 해야 표시됨.
      child: CustomScrollView(
        // CustomScrollView() 스크롤 가능한 뷰들을 섞어서 사용할 때
        slivers: <Widget>[
          SliverList(
            delegate: SliverChildListDelegate([
              _username(),
              _userBio(),
              _editProfileBtn(),
              _tabButtons(),
              _selectedIndicator(),
            ]),
          )
        ],
      ),
    );
  }

  Widget _selectedIndicator() {
    return AnimatedContainer(
      duration: Duration(milliseconds: 300),
      alignment: selectedLeft ? Alignment.centerLeft : Alignment.centerRight,
      curve: Curves.fastOutSlowIn,
      child: Container(
        height: 3,
        width: size.width / 2,
        color: Colors.black87,
      ),
    );
  }

  Row _tabButtons() {
    return Row(
      children: [
        Expanded(
          child: IconButton(
            color: selectedLeft ? Colors.black : Colors.black38,
            icon: ImageIcon(AssetImage('assets/images/grid.png')),
            onPressed: () {
              setState(() {
                // StatefulWidget의 상태변화 적용.
                selectedLeft = true;
              });
            },
          ),
        ),
        Expanded(
          child: IconButton(
            color: selectedLeft ? Colors.black38 : Colors.black,
            icon: ImageIcon(AssetImage('assets/images/saved.png')),
            onPressed: () {
              setState(() {
                // StatefulWidget의 상태변화 적용.
                selectedLeft = false;
              });
            },
          ),
        ),
      ],
    );
  }

  Widget _editProfileBtn() {
    return Padding(
      padding: const EdgeInsets.symmetric(
          horizontal: common_gap, vertical: common_xxs_gap),
      child: SizedBox(
        height: 24,
        child: OutlineButton(
          onPressed: () {},
          borderSide: BorderSide(color: Colors.black45),
          shape: RoundedRectangleBorder(
            // RoundedRectangleBorder() 둥근 모서리 직사각형
            borderRadius: BorderRadius.circular(6),
          ),
          child: Text(
            'Edit Profile',
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
        ),
      ),
    );
  }

  Widget _username() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: common_gap),
      child: Text(
        'username',
        style: TextStyle(fontWeight: FontWeight.bold),
      ),
    );
  }

  Widget _userBio() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: common_gap),
      child: Text(
        'username',
        style: TextStyle(fontWeight: FontWeight.w400),
      ),
    );
  }
}

// constants/screen_size.dart

import 'dart:ui';

Size size;