1주차 스타트~

박정한·2023년 5월 31일
0
post-thumbnail

0주차 기본 설정 - 개발환경 구성 완료

  • 개발환경 구성하는대 오류가 겁나 많이 떠서 힘들더라구...

    1주차 교육 시작

    vscode - 플루터 프로젝트 실행

    pubspec.yaml을 주로 수정함

  1. command palette - flutter new project - app - folder 지정

  2. command palette - Dart:Use Recommanded Settings

    DART 수정사항이 전체 반영

  3. 에뮬레이터 실행
    command palette - Flutter launch Emulator - pixel 버전(안드로이드 스튜디오 확인필 실행)

  4. 용어 정리
    padding : 안쪽여백
    margin : 바깥쪽 여백

    1주체 과제 MovieViews 만들기

    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": "탑건: 매버릭",
"imgUrl": "https://i.ibb.co/sR32PN3/topgun.jpg",
},
{
"category": "마녀2",
"imgUrl": "https://i.ibb.co/CKMrv91/The-Witch.jpg",
},
{
"category": "범죄도시2",
"imgUrl": "https://i.ibb.co/2czdVdm/The-Outlaws.jpg",
},
{
"category": "헤어질 결심",
"imgUrl": "https://i.ibb.co/gM394CV/Decision-to-Leave.jpg",
},
{
"category": "브로커",
"imgUrl": "https://i.ibb.co/MSy1XNB/broker.jpg",
},
{
"category": "문폴",
"imgUrl": "https://i.ibb.co/4JYHHtc/Moonfall.jpg",
},
];

// 화면에 보이는 영역
return Scaffold(
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.white,
    centerTitle: false,
    iconTheme: IconThemeData(color: Colors.black),
    title: Text(
      "Movie Reviews",
      style: TextStyle(
        color: Colors.black,
        fontSize: 28,
        fontWeight: FontWeight.bold,
      ),
    ),
    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(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ),
        ),
      ),
      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: 200,

                    //height: double.maxFinite,
                    fit: BoxFit.cover,
                  ),
                  Container(
                    width: double.infinity,
                    height: 200,
                    color: Colors.black.withOpacity(0.5),
                  ),
                  Text(
                    category,
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 36,
                    ),
                  ),
                ],
              ),
            );
          },
        ),
      ),
    ],
  ),
);

}
}

여기서 힘들었던 부분은 처음에 appbar가 아무리 불러도 호출이 안되서 잠깐이나마 해맨거와
두번째로 return Scaffold( 이부분에서어떤식으로 작성하는지 전혀 모른부분..
그리고 나서는 목표물 보면서 하나씩 코딩 모르는건 구글링 참고

그래도 정답은 보지 않았다는거에 1표

비록 내머리에서 다 나와서 코딩한건 아니지만.

1주차는 이렇게 지나가는구나.

여러가지요소들의 대한 사용법도 익히고, 이제 숙달되게 사용해서 숙지하는 방법뿐일거다.

2주차도 기대가 되는구만.

profile
I'm hope to FLUTTER MASTER

0개의 댓글