Flutter 입문

Text()

Text 위젯을 사용해 화면에 모든 언어의 시작인 'Hello World!' 를 입력해보면 이런 거지같은 화면을 만날 수 있다..

void main() {
  runApp(
    MaterialApp(
      home: Text('Hello World!'),
    ),
  );
}

 

---

Scaffold()

시각적 레이아웃 구조를 구현

 

- appBar: 앱 상단에 표시할 앱 바 속성

AppBar()로 래핑, 타이틀을 정하고 타이틀 글씨를 앱 바 중앙에 배치

(디폴트 값은 왼쪽 맨위)

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Center(
            child: Text('I Am Rich'),
          ),
        ),
      ),
    ),
  );
}

 

- backgroundColor: 배경색을 지정하는 속성

색상 팔레트를 나타내는 Colors 를 이용해 앱 바와 body 의 배경색을 지정

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Center(
            child: Text('I Am Rich'),
          ),
          backgroundColor: Colors.blueGrey[900],
        ),
      ),
    ),
  );
}

---

- 이미지 넣기

1. 프로젝트 파일 안에 이미지를 저장할 디렉토리를 만들고 이미지를 디렉토리에 넣기
2. pubspec.yaml 파일을 수정
   flutter 밑에 있는 assets 의 주석을 해제하고
   
   - path/사진명 형식으로 넣어야 하는데,  스페이스 (또는 탭) 의 간격을 제대로 지키지 않을 경우 이미지 파일을 읽을 수 없기 때문에 형식을 잘 지킬 것!

---

flutter:
(탭)assets:
(탭)(탭)-(띄어쓰기)path/사진명

또는

flutter:
(스페이스)(스페이스)assets:
(스페이스)(스페이스)(스페이스)(스페이스)-(띄어쓰기)path/사진명

---

- Image(): 이미지를 표시하는 위젯

- AssetImage(path): 내 기기에 저장되어 있는 내장 이미지를 가져오는 위젯

정말 아무것도 안하는 I Am Rich 앱 완성 코드

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.blueGrey,
        appBar: AppBar(
          title: Center(
            child: Text('I Am Rich'),
          ),
          backgroundColor: Colors.blueGrey[900],
        ),
        body: Center(
          child: Image(
            image: AssetImage('images/diamond.png'),
          ),
        ),
      ),
    ),
  );
}

 

무작정 과제를 시작하기보단 기본적인 메서드를 활용한 앱을 만들었다

오늘 내가 만든것은 옛날에 진짜 아무것도 안하는 앱으로 출시까지 한 앱이었다..

가격은 $999.99 인 아이폰 앱중에 가장 비싼 앱이였다고 합니다(TMI..)

이제 어느정도 익숙해졌으니 다음날부터 본격적인 과제 기차예매 앱을 만들어 보겠습니다