반응형
어색하다... 이런 걸 해본 적 없으니... 그래도 앞으로 최선을 다해볼 생각이다.
flutter는 이미 이전에 수강한 적이 있어 설치 및 준비에는 전혀 문제가 없었다. (수업만 잘 따라갈 수만 있다면..)OT 및 팀 별 네트워킹 마치고 수업을 들었다. 솔직히 내가 오랜 시간에 배운 내용을 압축해서 빠르게 진도가 흘렀다.이전에 배웠던 것을 생각하며, 진행하기 바빳다. 아무래도 코딩하는 순서나 방법이 내가 하던 방법과는 많이 달랐다.그래도 직접 하기에는 아직 이르고 부족하지만, 수업 진도를 이해하는데는 크게 문제없었다.결과 역시 오류 없이 정상적으로 이루어졌다. (오류가 있어도 아직 스스로 해결할 수 있다.)나중에는 나 스스로 코딩 내용마다 해설도 하고 그랬으면 좋겠다.
자만할 실력도 아니고, 초보자인 나에게 기회가 있는 동안에는 최선을 다해 많이 배우고 성실히 임할 것이다.
다만 나중에는 스스로 공부할 수 있는 실력이 되었으면 하는 바램은 있다.
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(), // 홈페이지 보여주기
);
}
}
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// 음식 사진 데이터
List<Map<String, dynamic>> dataList = [
{
"category": "수제버거",
},
{
"category": "건강식",
},
{
"category": "한식",
},
{
"category": "디저트",
},
{
"category": "피자",
},
{
"category": "볶음밥",
},
];
// 화면에 보이는 영역
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: false,
iconTheme: IconThemeData(color: Colors.black),
title: Text(
"Food Recipe",
style: TextStyle(
color: Colors.black,
fontSize: 28,
fontWeight: FontWeight.bold,
),
),
elevation: 0,
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.person_outline))
],
),
body: Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
decoration: InputDecoration(
hintText: "상품을 검색해주세요",
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.black),
),
suffixIcon: IconButton(
onPressed: () {},
icon: Icon(Icons.search),
)),
),
),
Divider(height: 1),
Expanded(
child: ListView.builder(
itemCount: dataList.length,
itemBuilder: (context, index) {
String category = dataList[index]['category'];
String imgUrl = dataList[index]['imgUrl'];
return Card(
child: Stack(
alignment: Alignment.center,
children: [
Image.network(
imgUrl,
width: double.infinity,
height: 120,
fit: BoxFit.cover,
),
Container(
width: double.infinity,
height: 120,
color: Colors.black.withOpacity(0.5),
),
Text(
category,
style: TextStyle(
color: Colors.white,
fontSize: 36,
),
),
],
),
);
},
),
),
],
),
drawer: Drawer(
child: Column(
children: [
DrawerHeader(
margin: const EdgeInsets.all(0),
decoration: BoxDecoration(color: Colors.amber),
child: SizedBox(
width: double.infinity,
child: Column(
children: [
CircleAvatar(
radius: 36,
backgroundColor: Colors.white,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.network(
width: 62,
),
),
),
SizedBox(
height: 16,
),
Text(
"닉네임",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
Text(
"hellow@world.com",
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
)
],
),
),
),
AspectRatio(
aspectRatio: 3 / 1,
child: PageView(
children: [
],
),
),
ListTile(
title: Text(
"구매내역",
style: TextStyle(fontSize: 18),
),
trailing: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
),
onTap: () {
Navigator.pop(context);
},
),
ListTile(
title: Text(
"저장한 레시피",
style: TextStyle(fontSize: 18),
),
trailing: Icon(
Icons.arrow_forward_ios,
color: Colors.black,
),
onTap: () {
Navigator.pop(context);
}),
],
),
),
);
}
}
반응형
댓글