앱 화면 만들기 1

Oct 01, 2024

Contents

이론 플러터 하려먼 첫번째로 기존 위젯 보기 플러터 순서 시작 1. 프로젝트 만들기 주의!!2. main.dart에서 void main빼고 다 삭제 3. stless 치고 엔터 4. MyApp에서 실행되니 이름을 MyApp으로 기입 5. const Placeholder()지우기 6. 어떤 디자인을 선택할 건지 안드로이드? IOS? 선택해야 함!! 안드로이드로 할 거니까 MaterialApp() 을 리턴에 넣어주기!2. home, scaffold해주기! 중요 선택적 매개변수 3. 컬럼(세로방향)저장 시 자동정렬 다시 시작

즐찾하기

ui 프레임 워크

이론

그림그리는 기술은 좌표에다 점을 찍는 것

최소 3가지가 필요하다 3차원이라 하는데

1 x

2 y

3 색상

이 세가지가 모이면 점이 된다 (색이 있는 점)

비트맵

💡

x,y만으로 그림 그린 것(검은색만 있음)

x,y만 있으면 그걸로 그림 그리면 비트맵이라 한다 검정색만 있음

가로를 1000개 점을 찍는다

최소 10비트가 필요하다 근데 컴퓨터는 8비트로 단위가 돼서 2바이트가 필요하다

화면 표현하는데 최소 4바이트가 필요하다! (가로 2바이트 + 세로 2바이트)

그림은 용량이 크다 왜냐하면 .하나만 찍어도 4바이트가 필요하다!

색상도 RGB 들어가면 R = 8비트 G = 8비트 B = 8비트 표현

근데 RGB만 하려면 색이 이쁘지 않다!

색상의 범위는 무한덴데 보통 32비트정도 먹인다

x y의 크기는 점의 밀도에 비례함 화면의 크기 비례 하지 않음

휴대폰 화면이 있는데 만약 꾸진 데에서 만들어서

화면 가로로 점이 20개만 넣어둠 이런 곳에 1024가 필요할까 없음

휴대폰 화면이 2000이라 한다면 2000에 1000 표현하면 나올까?

조금 사이 떨어져도 괜찮다. 사람 눈에는 비슷해 보임

점을 찍으면서 그림 그린다

막 점을 찍어서 그림 그려서 하나가 나왔어

이거를 재사용 하고 싶으면 객체로 만들어야 한다 class로

모든 그림을 객체로 만들까?. 아님 재사용할 것만 만들면 됨

재사용에 필요한 것만 모아둔게 즐찾한 사이트다 (위젯 인덱스에 수천개 있다 ux로 만든다)자기맘 대로 x

Flutter widget index

An alphabetical list of Flutter widgets.

https://docs.flutter.dev/reference/widgets

Material Design(구글 디자인)

💡

안드로이드 사용자가 경험 많이 했던 디자인

Cupertino(IOS 다자인)

💡

IOS 사용자가 경험 많이 했던 디자인

점을 찍어 만들면 사용자는 이쁘다 보다는 처음보는 거라 거부감을 느낀다.

즉 기존의 디자인써야지 사용자가 편하게 만들 수 있다.

이 세상에 없는 ux인데 앱에 넣고 사용자가 잘 사용한다? 엄청난 고수다!

우리는 처음 만드는 거니까 일단 기존의 것들을 잘 쓸 수 있어야 한다!

플러터 하려먼 첫번째로 기존 위젯 보기

공부방법 및 순서

기존 위젯 문서 읽기

사람들이 올려둔 위젯 설명 블로그 읽기

배운 것 들 내가 직접 해보기

플러터 순서

순서

내가 안드로이드로 만들 것인지? IOS로 만들 것인지!

시작

Column 컬럼

💡

세로

Row 로우

💡

가로

텍스트 위젯이 women, kids, shoes, woman 4개 있는데 가로여서 row로 묶어야 한다

1. 프로젝트 만들기

시작하기전 새 프로젝트 만들고

이게 기본이다!

주의!!

프로젝트가 프로젝트가 아니고 안드로이드로 잡힐 때가 있다 주의하자!

lib파일이 꼭 있어야 한다

새로 만들 때 this.window 하지 말자!! 오류날 수 있다!! new window해주자!

2. main.dart에서 void main빼고 다 삭제

3. stless 치고 엔터

1) stless

4. MyApp에서 실행되니 이름을 MyApp으로 기입


import 'package:flutter/material.dart';

void main() {
  //runApp실행되면 애 가 그림 그리는 메서드
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  //여기 생성자 자리 중괄호로 선택적 매개변수인데 지금은 지우자  const 오류나는데 지금 모르는 코드는 지우자!
  //const MyApp({super.key});

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

여기서 그림그린다 리턴 되는 값으로

크롬으로 한다면 좋으니 바꾸고 실행!

2) Placeholder

뭐 넣을지 모를 때 빈 화면에 채워넣으려고 만듬

5. const Placeholder()지우기

6. 어떤 디자인을 선택할 건지 안드로이드? IOS? 선택해야 함!! 안드로이드로 할 거니까 MaterialApp() 을 리턴에 넣어주기!

3) MaterialApp


import 'package:flutter/material.dart';

void main() {
  //runApp실행되면 애 가 그림 그리는 메서드
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp();
  }
}

2. home, scaffold해주기! 중요 선택적 매개변수

4) home

5) Scaffold란?

레이아웃 구조 만드는 것

즉 뼈대

감싸야 ux 무너지지 않게 자유도를 주면 ux가 무너진다 사용자가 쓰기 어려워 진다!

게임 만들때는 적절하지 않다!

바디에 그림을 그린다!

바디에 리턴 1개만 할 수 있다!!

2개 하려면 레이아웃 위젯으로 감싸야 한다


class MyApp extends StatelessWidget {
  //여기 생성자 자리 중괄호로 선택적 매개변수인데 지금은 지우자  const 오류나는데 지금 모르는 코드는 지우자!
  //const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Text("안녕"),
      ),
    );
  }
}

Text("안녕")지운다

3. 컬럼(세로방향)

6) children

배열타입이여서 여러개 넣을 수 있다.

배열 타입 여기다 넣으면 된다

여기다 Woman넣으면

(”Woman”), 하고 저장하면 아무것도 안되면

저장 시 자동정렬

특이한게 끝에 , 넣어도 오류 안남

,(콤마)

💡

다트에서 정렬을 말한다

ctrl alt L

💡

자동 정렬!

위젯을 이해해야함

우리는 가로로 해야함 그래서 로우가 필요함

Row 문서 보면

Children에 넣을 수 있다

children은 위젯 타입,

즉 상속이다!

new Row하면 왼쪽 타입에서 선택할 수 있다.

Row안에 넣어주자

사이 사이 공간이 마음에 안 든다?

html이라 하면 div에 다른 div 4개가 있는 것임 flex하면 가로 배치 됨

정렬은 부모한테 정렬을 한다! 기본이다

즉 Row에 정렬

spacer

남는 공간 내가 차지하겠다

n분의 1의 비율로 나뉜다 (spacer 개수로)

사이에 spacer다 넣으면

스페이스 이븐이라 한다! 남는 공간 똑같이 잡아라

끝에 spacer빼면

스페이스 비트윈

Row 엔터 하고 컨트롤 스페이스

가로 세로 axisAli

컬럼에 기본 방향 세로

로우는 기본방향 가로

일정하지 않으니까 자기 방향의 액시야스는

컬럼 입장에서 매인 액시야스는 세로

크로스는 반대다!

그냥 서로 기준으로 나뉜다!

이 화면에서 로우의 크기는

텍스트의 크기

화면 범위 아는 법

패딩 줄거임

Row한테 패딩 주고싶어

Row에 alt enter 맥은 option enter

all 에 only하면 top만 줄 수 있다. 지금은 all만 배우자

EdgeInsets는 이름있는 생성자다

생성자를 통해서 마음대로 만들겠다

앱은 16이 표준이다

위쪽으로 16주기 싫어 하면은 all로 하면 안됨!!

왼쪽 오른쪽 16!!

모든게 위젯이다!

글자만 바꿔보자

style는 선택적 매개변수

Text는 선택적 매개변수가 아니다!

스트링 텍스트는

void hello(String text, {String? style}) {

}

왜 String text는 선택적 매개변수로 안 했을까? 텍스트 위젯에 텍스트가 없으면 안되니까 반드시 있어야 하니까!!

텍스트 위젯이면 required넣으면 안됨?

뒤에거는 디자인이니까 딱히 없어도됨

시그니쳐라 한다 main이다

main인 애

만약 textbutton이라하면 핵심은 text다 이게 시그니쳐 이런 애 선택적 매개변수로 안만든다!

인셋?

아이폰보면 위에 인셋이라 그림그릴 수 없는 영역이 있다

우리는 패딩으로 감싸고 그 영역이 인셋영역이다

즉 엣지에 인셋영역을 준다 키워드 필요해? 없음

만약 only라 한다면 시그니처가 아니고 top이나 이런 것 처럼 위치를 말해줘야 한다

symmentric하면 수평? 수직의 패딩 키워드가 필요하다

all은 필요 없음 이런게 시그니처 매개변수라 한다!! 핵심이다

스타일에 뭐가 들어가는지 어떻게 알아요?

문서를 봐서 안다!!

teststyle이면 앱스트랙트 타입이면 못 넣는다?

추상 클래스면 키 값 넣으려면 못 넣는다

데코레이션이라는 키 값 뭐 넣을지 모르니 이 데코래이션이 추상클래스여서 new안됨!

추상클래스니까 상속한 어떤 클래스만 넣을 수 있다

적혀있다 []로

공부 방법

문서를 그냥 흝어 보고 있나 없나 대충 보고

인터넷에

플러터 text 위젯 이런식으로 찾아보고 사람들이 적어놓은 글 보고 연습하기!

나중에 되면 지피티로

기본기는 되야한다!!

다시 시작

디버그 날리려면


debugShowCheckedModeBanner: false,
      home: Scaffold(

전체 코드


class MyApp extends StatelessWidget {
  //여기 생성자 자리 중괄호로 선택적 매개변수인데 지금은 지우자  const 오류나는데 지금 모르는 코드는 지우자!
  //const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("Woman", style: TextStyle(fontSize: 16)),
                  Text("Kids", style: TextStyle(fontSize: 16)),
                  Text("Shoes", style: TextStyle(fontSize: 16)),
                  Text("Bag", style: TextStyle(fontSize: 16)),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}