[플러터] 10. profile 위젯 정리

백하림's avatar
May 28, 2025
[플러터] 10. profile 위젯 정리

햄버거 버튼

endDrawer: Container( width: 200, color: Colors.blue, )
🔥
Scaffold에서 endDrawer가 설정되어 있을 경우, 자동으로 AppBar 오른쪽에 햄버거 버튼(≡) 을 생성해줌.

조건:

  • AppBaractions를 설정하지 않으면
  • Flutter가 자동으로 endDrawer용 햄버거 버튼을 제공
notion image

뒤로 가기 버튼

leading: IconButton(onPressed: () {}, icon: Icon(Icons.arrow_back_ios)),
notion image

앱바 안에서 텍스트 중앙 배치

title: Text("Profile"), centerTitle: true,
notion image

CircleAvatar

SizedBox( height: 80, width: 80, child: CircleAvatar( backgroundImage: AssetImage("assets/person.png"), ), )
notion image

소개글

SizedBox( width: 16, ), // 프로필 이미지와 텍스트 사이 간격 Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( "Harim", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), ), Text("Student"), Text("GreenComputer Academy"), ], )
notion image

게시글 수, 좋아요 수, 공유 수

Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Column(children: [Text("Posts"), Text("50")]), Container(width: 2, height: 60, color: Colors.grey), Column(children: [Text("Likes"), Text("10")]), Container(width: 2, height: 60, color: Colors.grey), Column(children: [Text("Share"), Text("3")]), ], )
notion image

ElevatedButton

ElevatedButton( onPressed: () {}, child: Text( "Follow", style: TextStyle(color: Colors.white), ), style: ElevatedButton.styleFrom( shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(5), ), backgroundColor: Colors.blue, fixedSize: Size(150, 40), ), )
notion image

InkWell

InkWell( onTap: () {}, child: Container( width: 150, height: 45, child: Align( alignment: Alignment(0, 0), child: Text("Message"), ), decoration: BoxDecoration( border: Border.all(), borderRadius: BorderRadius.circular(5), ), ), )
notion image

탭바

TabBar( tabs: <Widget>[ Tab(icon: Icon(Icons.apple)), Tab(icon: Icon(Icons.adb)), ], )
notion image

탭바 뷰

Expanded( child: TabBarView( children: <Widget>[ GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, mainAxisSpacing: 2, crossAxisSpacing: 2, ), itemBuilder: (context, index) { print("index : ${index}"); return Image.network("https://picsum.photos/id/${index + 50}/200/200"); }, itemCount: 42, ), Center(child: Text("It's rainy here")), ], ), )
notion image
notion image
notion image
🔥
사진을 불러올 때 화면 상에서는 6개만 보이지만
Flutter는 스크롤 성능을 위해 일부 아이템을 미리 build() 해둠
Share article

harimmon