
endDrawer를 이용해봄.
DefaultTabController를 이용해봄.
Ink_Well 을 이용해봄
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
leading: Icon(
Icons.arrow_back_ios,
color: Colors.blue,
),
title: Text("Profile"),
centerTitle: true,
),
endDrawer: Container(
width: 200,
color: Colors.blue,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
Row(
children: [
CircleAvatar(
radius: 50,
backgroundColor: Colors.white,
backgroundImage: AssetImage("assets/avatar.png"),
),
const SizedBox(width: 20),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("GetInThere"),
Text("프로그래머/작가/강사"),
Text("데어 프로그래밍"),
],
),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_numtext("50", "Post"),
_line(),
_numtext("10", "Likes"),
_line(),
_numtext("3", "Share"),
],
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
_button("Follow", Colors.blue),
_button("Message", Colors.grey),
],
),
Expanded(
child: DefaultTabController(
length: 2,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
],
),
Expanded(
child: TabBarView(
children: [
Center(child: Text("Screen 1")),
Center(child: Text("Screen 2")),
],
),
),
],
),
),
),
],
),
),
),
);
}
InkWell _button(String text, Color mColor) {
return InkWell(
onTap: () {
print("$text 버튼 클릭됨");
},
child: Container(
alignment: Alignment.center,
width: 150,
height: 45,
child: Text("$text"),
decoration: BoxDecoration(
color: mColor,
borderRadius: BorderRadius.circular(10),
),
),
);
}
Container _line() {
return Container(
height: 60,
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue,
),
),
);
}
Column _numtext(String num, String text) {
return Column(
children: [
Text("$num"),
Text("$text"),
],
);
}
}
선생님 수정
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(useMaterial3: true),
home: ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
ProfilePage({super.key});
int size = 30;
@override
Widget build(BuildContext context) {
double bottomHeight = (size ~/ 3) + (size/3) * 155;
return Scaffold(
endDrawer: _menu(),
appBar: _appbar(),
body: ListView(
children: [
_header(),
_middle(),
SizedBox(child: _bottom(size), height: bottomHeight),
],
),
);
}
Row _middle() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(
children: [
Text("50"),
Text("10"),
],
),
Container(
width: 1,
height: 100,
color: Colors.black,
),
Column(
children: [
Text("50"),
Text("10"),
],
),
Container(
width: 1,
height: 100,
color: Colors.black,
),
Column(
children: [
Text("50"),
Text("10"),
],
),
],
);
}
Container _menu() {
return Container(
width: 200,
color: Colors.blue,
);
}
AppBar _appbar() {
return AppBar(
iconTheme: IconThemeData(color: Colors.blue),
title: Text("Profile"),
centerTitle: true,
leading: Icon(Icons.arrow_back_ios),
);
}
Widget _header() {
return Padding(
padding: const EdgeInsets.symmetric(vertical: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 80,
height: 80,
child: CircleAvatar(
backgroundImage: NetworkImage(
"https://cdn.imweb.me/thumbnail/20240220/105cc1508cf03.png",
),
),
),
SizedBox(width: 50),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("A"),
Text("B"),
Text("C"),
],
)
],
),
);
}
}
class _bottom extends StatelessWidget {
final int num;
_bottom(this.num);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Column(
children: [
TabBar(
tabs: [
Tab(icon: Icon(Icons.accessibility_new_outlined)),
Tab(icon: Icon(Icons.account_circle_sharp)),
],
),
Expanded(
child: TabBarView(
children: [
GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 5,
mainAxisSpacing: 5,
),
itemBuilder: (context, index) => Image.network(
"https://picsum.photos/id/${200 + index}/200/300",
fit: BoxFit.cover,
),
itemCount: num,
physics: NeverScrollableScrollPhysics(),
),
Container(color: Colors.red),
],
),
),
],
),
);
}
}
Share article