[코드 뜯어보기] 쇼핑몰 앱 만들기 A

안녕하세요 여러분~~

오늘은 쇼핑몰 앱 만들기를 해보려고 하는데요!

아직 문법도 익숙하지 않은 상태에서 갑자기 무슨 앱 만들기야???

이러실 수 있지만,

원래 시험도 문제 먼저 풀어보면 내가 뭘 공부해야 하는지 알 수 있잖아요?

그런 의미로 앱 만들기를 먼저 진행해보고, 

코드를 하나하나 뜯어가면서 상관 관계를 알아가보려고 합니다..!!(두근두근)

 

그럼 가봅시다!!!!

---

 

[main.dart] 전체 코드

import 'package:flutter/material.dart';
import 'package:shopping_mall_project/homepage/homepage.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
          backgroundColor: Color.fromARGB(255, 122, 253, 255),
          foregroundColor: Colors.black,
        ),
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.lightBlueAccent,
          brightness: Brightness.light,
          ),
      ),
      home: const Homepage(),
    );
  }
}

 

오늘은 스위치 역할을 하는 메인 함수가 있는 파일의 코드를 먼저 분석해 봅시다!!

개발 작업을 할 때는 기능별로 파일을 나눠서 작업하고,

메인 함수가 있는 코드는 최대한 간결하게 작성하는 것이 좋습니다! 그럼 훨씬 가독성 높은 코드 작성이 될 수 있거덩요ㅎㅎ

 

 

1. import: "이 파일에서 다른 파일(또는 패키지)에 있는 코드를 쓰겠다"는 선언

import 'package:flutter/material.dart'; //패키지 코드 연결
import 'package:shopping_mall_project/homepage/homepage.dart'; //homepage 코드 연결

한 파일 안에서 작업할 때 다른 파일에 있는 함수나 클래스를 쓰려면 반드시 import를 통해서 파일 경로를 알려주고 연결해야합니다!

 

2. main 함수

void main() {
  runApp(const MyApp());
} // 코드 실행

main 함수는 지난 시간에도 소개해 드렸듯이, 코드를 실행하는 함수라고 했죠!

 

runApp: flutter 엔진에게 이 위젯부터 앱 시작하라고 알려줘야 하기때문에 반드시 필요

 

• 위젯 트리의 루트 지정
• 화면 그리기 시작
• 이벤트 루프 연결

왜 const MyApp() 인가?

 

const: 값 변경이 불가능한 변수에 붙여주며, MyApp()은 상태 없는 위젯이기 때문에

생성자에 들어오는 값이 전부 final이다.(이 위젯은 절대 안 바뀜)

 

* MyApp()은 따로 지정한 클래스 이름이므로 다른 이름으로 변경이 가능하다

 

3. StatelessWidget의 상속

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
          backgroundColor: Color.fromARGB(255, 122, 253, 255),
          foregroundColor: Colors.black,
        ),
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.lightBlueAccent,
          brightness: Brightness.light,
          ),
      ),
      home: const Homepage(),
    );
  }
}

 

 

위젯을 만들 때 두 가지 종류로 만들 수 있는데요,

그 기준은 '상태가 있느냐, 없느냐'입니다.

 

StatelessWidget : 상태가 없는 위젯
StatefulWidget: 상태가 있는 위젯(상태에 따라 화면이 변경됨)

 

MyApp( )은 앱의 규칙을 정하는 클래스라 StatelessWidget을 상속 받아서 UI 구조를 정의했습니다!

class MyApp extends StatelessWidget {
  const MyApp({super.key});

• key: Flutter 내부에서 위젯을 구분하기 위한 식별자 -> 주민번호 같은 것
• key가 왜 필요할까? -> flutter는 화면을 "그림"이 아니라 "비교"로 만든다.
• 이전 화면과 지금 화면이랑 뭐가 다른가를 비교

 

StatelessWidget의 상위 클래스는 Widget 클래스인데,

이름표 같은 key 값을 가진다.

class Widget {
  final Key? key;
} //타입: key?, 변수 이름: key

const MyApp({Key? key}) : super(key: key);
-> 압축한게 아래의 코드

const MyApp({super.key});

 

 

부모 클래스가 가지고 있는 key 필드를
생성자를 통해 전달하기 위해 super.key를 쓴다!

 

4. @override: 메서드 재정의

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.white,
        appBarTheme: const AppBarTheme(
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
        ),
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.lightBlueAccent,
          brightness: Brightness.light,
          ),
      ),
      home: const Homepage(),
    );
  }

 

 

1) @override: 부모 클래스에 있는 메서드를 재정의

2) build(): flutter가 자동으로 호출하는 메서드, 위젯 객체(설계도)를 반환

• 처음 화면 생성
• setState() 호출
• 부모 위젯이 다시 빌드될 때
• 화면 회전 / 테마 변경 등

3) (BuildContext context): 매개변수

      BuildContext란?

• 이 위젯이 위젯 트리에서 어디에 있는지에 대한 정보
• 부모, 조상 위젯에 접근하는 통로

4) MaterialApp: (루트 위젯)

• Material 디자인 기반 앱 설정
• 테마, 네비게이션, 로케일, 라우팅 관리

build 함수는
현재 위젯의 위치(context)를 기준으로
화면을 구성하는 Widget 설계도를 반환한다.

 

5) ThemeData: 앱의 테마 설정

• 앱의 컬러, 배경화면 컬러, 앱바 컬러 등 지정 가능
• 라이트 모드 및 다크 모드 테마 설정도 여기서 진행!

ColorScheme

primary	메인 컬러 (버튼, 강조)
onPrimary	primary 위의 텍스트
secondary	보조 강조 색
onSecondary	secondary 위의 텍스트
tertiary	추가 포인트 컬러

 

 

배경 & 표면 컬러

background	앱 전체 배경
onBackground	배경 위 텍스트
surface	카드, AppBar
onSurface	surface 위 텍스트
surfaceVariant	구분용 배경

 

6) home: const Homepage( )

• home: 위젯 타입
• const Homepage( ): 생성자 인자가 고정인 홈페이지 위젯을 연결

즉, Homepage 위젯을 생성해서 앱의 첫 화면으로 지정한 것이다.

 

[위젯 트리 설계도]

MyApp
 └─ MaterialApp
     └─ Homepage
         └─ Scaffold
             └─ Column
                 └─ Text