Flutter 1. 메인 화면 위젯 구성

 

플러터의 의존성 관리 도구는 pubspec이다.

https://pub.dev/

 

Dart packages

 

device를 웹으로 잡고 실행해보자.

 

이름을 StoreApp으로 바꾸면 test 폴더에 오류가 난다.

지금 테스트를 할게 아니기 때문에 테스트 폴더를 통째로 날려버리자.

 

어플의 여러가지 페이지가 있을거니까

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

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

 

import 'package:flutter/material.dart';
import 'package:store_app/pages/MainPage.dart';

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

class StoreApp extends StatelessWidget {
  const StoreApp({Key? key}) : super(key: key); // 생성자

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MainPage(), // 안드로이드 UX 향상 : scaffold 사용
    );
  }
}

이제 pages 폴더에 페이지를 만드는게 플러터의 일이다.

 

이제 메인페이지에 뼈대를 만들어서 그림을 그려주자. 바디에 그림을 그려준다.

바디에는 리턴을 하나만 넣을 수 있어서 Text 위에서 alt + Enter

 

 

위젯을 없애고 싶으면 다시 alt+enter 눌러서 remove 해줄 수 있다.

 

 

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold( // 안드로이드 UX 향상 : scaffold 사용
      body: Column(
        children: [
          Text("Hello World"),
          Text("Hello World"),
          Text("Hello World"),
        ],
      ),
    );
  }
}

 

 

컬럼의 기본 정렬은 center이다.

컬럼은 원래 inline 속성을 가지는데 아래 row를 가지게 되면

row때문에 전체로 늘어난다.

row가 block 속성이기 때문이다.

 

 

이건 space-between

 

Row(
  children: [
    Text("Woman"),
    Spacer(),
    Text("Kids"),
    Spacer(),
    Text("Shoes"),
    Spacer(),
    Text("Bag"),
  ],
),

 

이건 space-around

 

Row(
  children: [
    Spacer(),
    Text("Woman"),
    Spacer(),
    Text("Kids"),
    Spacer(),
    Text("Shoes"),
    Spacer(),
    Text("Bag"),
    Spacer(),
  ],
),

 

너무 불편하다.

 

mainAxisAlignment: MainAxisAlignment.spaceAround

import 'package:flutter/material.dart';

class MainPage extends StatelessWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(12.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              children: [
                // Spacer(),
                Text("Woman"),
                // Spacer(),
                Text("Kids"),
                // Spacer(),
                Text("Shoes"),
                // Spacer(),
                Text("Bag"),
                // Spacer(),
              ],
            ),
          ),
          Text("Hello World"),
          Text("Hello World"),
          Text("Hello World")
        ],
      ),
    );
  }
}

 

 

[출처]

 

https://cafe.naver.com/metacoding

메타코딩 : 네이버 카페

메타 코딩 유튜브

https://www.youtube.com/c/%EB%A9%94%ED%83%80%EC%BD%94%EB%94%A9

메타코딩