[Flutter] 3. Store App v1 : Prototype

1. New Project

• 아래와 똑같이 세팅

• main.dart
• build 안의 위젯들을 main에서 실행하는 방식
• return 문 안에 container, 각종 widget을 포함하여 배치
• Placeholder : 해당 공간의 크기만큼 박스 안에 X를 그려서 표시하는 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  

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

• 실행 시 다음과 같은 화면이 출력됨

2. 배치

• row는 row 방향으로 block, column 방향으로 inline.

• column은 column 방향으로 block, row 방향으로 inline.
• 즉 어떤 방향을 설정할 시 그 방향의 main axis : block, cross axis : inline

• Column의 width(=row 크기)는 내부 item의 제일 큰 width에 의해 결정.

• Row의 height(=column 크기)는 내부 item의 제일 큰 height에 의해 결정.

• Column, Row의 모든 내부 item의 배치는 가운데 정렬. (justify-content-center)

• inline 성질에 의해서 Column의 width, Row의 Height가 줄어들면 화면의 좌측 및 상단으로 붙게 됨.

3. 위젯 추가

• Text() : 텍스트 추가

• Row() : 내부 항목을 열 방향으로 배치함

• Column() : 내부 항목을 행 방향으로 배치함

• SafeArea() : 상태 바 영역에 여백 (padding) 추가

• Spacer() : 공간(여백) 추가

• Padding() : 위젯 주변에 빈 공간(여백) 추가

• Expanded : 주변에 남는 여백을 다 채움

• SizedBox() : 여백의 크기를 직접 지정할 수 있는 박스 추가
• width / height 값으로 여백 크기 설정

4. 코드 작성

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: StorePage(),
    );
  }
}

// stl 이라고 적으면 자동완성 기능이 활성화 된다.
class StorePage extends StatelessWidget {
  const StorePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            // const는 변하지 않는 위젯 앞에 붙일 수 있다. const를 이용해 해당 위젯은 변하지 않음을 알려주면 중복된 위젯을 다시 그리지 않아 앱의 속도가 개선된다.
            const Padding(
              padding: EdgeInsets.all(25.0),
              child: Row(
                children: [
                  Text("Woman", style: TextStyle(fontWeight: FontWeight.bold)),
                  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(child: Image.asset("assets/bag.jpeg", fit: BoxFit.cover)),
            SizedBox(height: 2),
            Expanded(child: Image.asset("assets/cloth.jpeg", fit: BoxFit.cover)),
          ],
        ),
      ),
    );
  }
}

5. Result