1. 내 정보 페이지(로그아웃)

고급기술은 나중에 입히고 기본적인 위젯들로만 구성해서 만들어서 백엔드와 속도를 맞춘다. 

 

전체 적인 구조는 Scaffold - Appbar,Body,BottomNavigation 세가지로 구성

Appbar

- Row : Icon, Logo,Divider 

Body 

- Column : Image(ClipRRect), TextButton1,2,3

BottomNavigation

- Row :  Divider, Icon1,2,3,4,5 

---

1. 기본 틀 잡기 

피그마에서 container의 높이를 임의로 지정을 해주었다. - 36

넓이는 모두 차지하게 해주고 padding값으로 추후에 조정을 해준다. 

2. Appbar 먼저 만들기

  AppBar _appBar() {
    return AppBar(
      elevation: 1,
      backgroundColor: Colors.white,
      leading: IconButton(// leading 는 왼쪽 정렬
        onPressed: () {},
        icon: Icon(
          CupertinoIcons.bell,
          color: Colors.black,
        ),
      ),
      centerTitle: true,// title 중앙 정렬
      title: TextButton( // 원래는 로고 들어갈 자리 임의로 넣어줌.
        onPressed: () {},
        child: Text(
          "로고",
          style: TextStyle(color: Colors.black),
        ),
      ),
    );
  }

 

3. body작성 

Container로 여러개 만들어주었다. 

여기서 Container는 자식이 생기면 자식의 넓이만큼 자동으로 줄어들게 되는데

그럼 button이 글자 만큼 넓이를 차지하게 된다... 이것을 해결하기 위해 TextButton.styleForm을 주어서 해결했다.

전체 코드 

import 'package:finalproject_front/theme.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';
import 'package:flutter/src/widgets/container.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  Widget build(BuildContext context) {
    final String text;
    return Scaffold(
      appBar: _appBar(),
      body: Column(
        // crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Container(
              height: 100,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                image: DecorationImage(
                    image: NetworkImage("https://picsum.photos/200"),
                    fit: BoxFit.cover),
              ),
            ),
          ),
          _divider(),
          _textButton("로그인/회원가입"),
          _divider(),
          _textButton("알람 설정"),
          _divider(),
          _textButton("고객센터"),
          _divider(),
        ],
      ),
    );
  }

  AppBar _appBar() {
    return AppBar(
      elevation: 1,
      backgroundColor: Colors.white,
      leading: IconButton(
        onPressed: () {},
        icon: Icon(
          CupertinoIcons.bell,
          color: Colors.black,
        ),
      ),
      centerTitle: true,
      title: TextButton(
        onPressed: () {},
        child: Text(
          "로고",
          style: TextStyle(color: Colors.black),
        ),
      ),
    );
  }

  Divider _divider() {
    // return Container(
    //     width: double.infinity,
    //     height: 1,
    //     child: ColoredBox(
    //       color: Colors.black,
    //     ));
    return Divider(
      thickness: 1,
      height: 0, // 기본 설정된 패딩 값을 없애줌
      color: Color(0xff929AAB),
    );
  }

  Widget _textButton(String text) {
    return Padding(
      padding: const EdgeInsets.only(left: 8.0),
      child: Container(
        width: double.infinity,
        child: TextButton(
          onPressed: () {},
          child: Text(
            "${text}",
            style: TextStyle(color: Colors.black),
          ),
          style: TextButton.styleFrom(alignment: Alignment.bottomLeft),
        ),
      ),
    );
  }
}