[Flutter/Project](Instagram Clone) 유저 프로필 화면 만들기01

---

 

소스코드

// profile_screen.dart

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

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[100],
      body: SafeArea(
        // SafeArea() 디바이스 상단바와 거리를 띄움
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _appbar(),
            Expanded(
              // CustomScrollView()가 빈공간을 차지하도록 해야 표시됨.
              child: CustomScrollView(
                // CustomScrollView() 스크롤 가능한 뷰들을 섞어서 사용할 때
                slivers: <Widget> [
                  SliverList(
                    delegate: SliverChildListDelegate([
                      _username(),
                      _userBio(),
                      _editProfileBtn(),
                    ]),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _editProfileBtn() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: common_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),
      ),
    );
  }

  Row _appbar() {
    return Row(
      children: [
        SizedBox(width: 44),
        Expanded(
          child: Text(
            'jerrycho',
            textAlign: TextAlign.center,
          ),
        ),
        IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {},
        )
      ],
    );
  }
}