[Flutter] 연습하기1 - flutter store app

플러터를 이용해서 간단한 store App을 만들며 문법에 익숙해져보도록 하겠습니다.
만들면서 배우는 플러터 앱 프로그래밍을 바탕으로 연습했습니다.

코드를 짜기 전, 최상단 폴더에 assets 폴더를 만들고 이미지를 넣어줍니다.

yaml 파일 설정

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/bag.jpeg
    - assets/cloth.jpeg

yaml 파일에서 assets 폴더의 이미지를 사용할 거라고 명시해주면 프로젝트에서 이미지를 가져올 수 있습니다.

 

시나리오 코드 1 - 초기 코드 작성

// 플러터 동작시 반드시 있어야 함
import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  // 플러터는 거의 모든 것이 위젯
  // 전달된 위젯을 최상위 위젯으로 설정하고 앱을 시작하는 함수
  runApp(MyApp());
}

//stl 단축키 활용
class MyApp extends StatelessWidget {
  // 생성자 - 매개변수 : 선택적 명명 매개변수
  MyApp({super.key});

  // 부모클래스의 메서드를 재정의하는 문법
  // build 함수는 화면에 그림을 그려주는 함수
  // buildContext는 위젯 트리에서의 위치와 관련된 다양한 정보를 포함하고 있음
  @override
  Widget build(BuildContext context) {
    // const 상수를 만들어주는 키워드이다 < 컴파일시점
    return const Placeholder();
  }
}

플러터는 거의 모든 것이 위젯입니다.
main 함수에서 runApp() 을 통해 위젯을 최상위 위젯으로 설정하고 앱을 시작합니다.
build 함수는 화면에 그림을 그려주는 함수입니다.
buildContext는 위젯 트리에서의 위치와 관련된 다양한 정보를 포함하고 있습니다.

 

시나리오 코드 2 - MaterialApp 위젯 추가

import 'package:flutter/material.dart';

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

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

  // Flutter 개발을 할 때 맨 밑바닥부터 개발하는 것은 힘들다
  // 기본적 개발을 할 수 있도록 매우 유용한 클래스를 제공한다
  // MaterialApp
  @override
  Widget build(BuildContext context) {
    // 생성자
    // home: (라벨) 선택적 명명 매개변수로 설계되어있다.
    return MaterialApp(
      // div 박스와 같은 녀석
      home: StorePage(),
    );
  }
}

class StorePage extends StatelessWidget {
  StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

MaterialApp은 HTML 기준으로 div 박스와 같은 역할을 한다고 생각하면 됩니다.

import 'package:flutter/material.dart';

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

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

  // Flutter 개발을 할 때 맨 밑바닥부터 개발하는 것은 힘들다
  // 기본적 개발을 할 수 있도록 매우 유용한 클래스를 제공한다
  // MaterialApp
  @override
  Widget build(BuildContext context) {
    // 생성자
    // home: (라벨) 선택적 명명 매개변수로 설계되어있다.
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // div 박스와 같은 녀석
      home: StorePage(),
    );
  }
}

class StorePage extends StatelessWidget {
  StorePage({super.key});

  @override
  Widget build(BuildContext context) {
    // 시각적 레이아웃 구조를 잡아주는 위젯
    return Scaffold(
      // 안전영역 내에 자식 위젯들을 배치하도록 도와준다.
      body: SafeArea(
        child: Column(
          // 위젯은 자식 또는 자식들을 속성으로 가질 수 있다.
          children: [
            Padding(
              padding: EdgeInsets.all(25.0),
              // Row 위젯은 자식 위젯들을 수평 방향으로 정렬해주는 위젯이다
              child: const Row(
                children: [
                  Text(
                    'Woman',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(), // Spacer 위젯은 남은 공간을 차지하여 위젯 간격을 조절할 때 활용 가능
                  Text(
                    'Kids',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    'Shoes',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Spacer(),
                  Text(
                    'Bag',
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                ],
              ),
            ),
            // Expanded 위젯은 자식 위젯을 가용 공간에 맞게 확장시켜 배치하는 위젯
            Expanded(
                child: Image.asset(
              'assets/bag.jpeg',
              fit: BoxFit.cover,
            )),
            // SizedBox은 고정된 크기의 빈 공간을 만들거나 자식 위젯의 크기를 제한할 때 사용
            SizedBox(
              height: 2,
            ),
            Expanded(
                child: Image.asset(
              'assets/cloth.jpeg',
              fit: BoxFit.cover,
            )),
          ],
        ),
      ),
    );
  }
}

 

 

 

아래의 문헌을 참고하여 작성된 포스팅입니다.
최주호, 김근호, 이지원(공저) 『만들면서 배우는 플러터 앱 프로그래밍』, 앤써북, 2023.