[Flutter/Project](Instagram Clone) ListTile을 이용한 메뉴 만들기

---

api.flutter.dev/flutter/material/ListTile-class.html

ListTile class - material library - Dart API

---

profile_screen.dart 파일 변경점.

• 각 파일에서 같은 애니메이션 속도를 정하기 위해 duration을 const 변수로 밖으로 빼냄.
• 메뉴 사이즈 변경.

---

소스코드

// widgets/profile_side_menu.dart

import 'package:flutter/material.dart';

class ProfileSideMenu extends StatelessWidget {
  final double menuWidth;

  const ProfileSideMenu(this.menuWidth, {Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: SizedBox(
        width: menuWidth,
        child: Column(
          children: [
            ListTile(
              title: Text(
                'Setting',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            ListTile(
              leading: Icon(
                Icons.exit_to_app,
                color: Colors.black87,
              ),
              title: Text('Sign Out'),
            )
          ],
        ),
      ),
    );
  }
}

// profile_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter_project_IJ/constants/screen_size.dart';
import 'package:flutter_project_IJ/widgets/profile_body.dart';
import 'package:flutter_project_IJ/widgets/profile_side_menu.dart';

enum MenuStatus { opened, closed }

// 클래스 바깥에서 선언한 변수는 다른 파일에서 접근이 가능한 static 변수.
const duration = Duration(milliseconds: 600);

class ProfileScreen extends StatefulWidget {
  @override
  _ProfileScreenState createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  final menuWidth = size.width / 3 * 2; //메뉴 사이즈

  // 메뉴 상태 기본 값(closed)
  MenuStatus _menuStatus = MenuStatus.closed;

  // 메뉴를 열기 전 기본 값.
  double bodyXPos = 0;
  double menuXPos = size.width; //화면 사이즈만큼 우측 밖으로 나가있음

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: Stack(
        children: [
          AnimatedContainer(
            duration: duration,
            transform: Matrix4.translationValues(bodyXPos, 0, 0),
            child: ProfileBody(onMenuChanged: () {
              setState(() {
                // 메뉴 상태 토글
                // profile_body.dart 파일의 _appbar 메서드에서 버튼이 선태될 때 실행.
                // 메뉴 상태가 closed이면 opened, opend이면 closed로 변경.
                _menuStatus = (_menuStatus == MenuStatus.closed)
                    ? MenuStatus.opened
                    : MenuStatus.closed;

                switch (_menuStatus) {
                  case MenuStatus.opened:
                    bodyXPos = -menuWidth;
                    menuXPos = size.width - menuWidth;
                    break;
                  case MenuStatus.closed:
                    bodyXPos = 0;
                    menuXPos = size.width;
                    break;
                }
              });
            }),
          ),
          AnimatedContainer(
            duration: duration,
            transform: Matrix4.translationValues(menuXPos, 0, 0),
            child: Positioned(
              top: 0,
              bottom: 0,
              width: menuWidth,
              child: ProfileSideMenu(menuWidth),
            ),
          ),
        ],
      ),
    );
  }
}