기본 위젯 추가하기

기본 위젯 4가지만 추가할 수 있게 되면
대략적인 디자인을 만드는게 큰 도움이 된다.

1. Text 위젯
2. Icon 위젯
3. Image 위젯
4. Container(박스) 위젯

Lint 관련 워닝 없애기

본격적으로 프로젝트를 시작하기 전에

Lint 관련 워닝을 없애기 위해 몇가지 코드를 추가해주어야한다.

Lint란?

Lint라는 것은 코드적인 관습같은 것을 안내하고
많은 사람들이 사용하기 좋은 모습의 코드를 쓰도록 도와주는건데
초보때부터 다 지켜가면서 하려면 힘들기때문에 일단 무시하고 진행하려고 한다.

analysis_options.yaml 파일에 들어가서 rules 아래에 다음처럼 코드를 추가하고 저장한다.

rules:
  prefer_const_constructors: false
  avoid_print: false
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables: false

프로젝트 시작하기

main.dart - 메인 페이지

main.dart 파일은 앱의 메인 페이지다.

프로젝트를 처음 생성하면 이 파일에 구글이 만들어놓은 기본적인 템플릿 코드가 있는데
다음 코드만 냅두고 모두 지워주도록 한다.

import 'package:flutter/material.dart';

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

여기서 runApp() 함수는 우리가 만든 레이아웃을 앱으로 보여주는 함수다.
MyApp을 만들고 함수를 실행하면 우리가 만든 앱을 볼 수 있다.

MyApp 메인 페이지 만들기

다음 코드를 main.dart 아래측에 추가해준다.

(stless 라고 치고 탭(엔터)키를 누르면 자동완성된다.)

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: 
    );
  }
}

home 옆에 위젯을 추가해서 디자인을 하면 된다.

위젯 만들기

위젯은 html의 태그와 비슷한 역할을 한다.

html에서 텍스트를 넣을 때는 <p>, 이미지를 넣을 때는 <img> 태그를 넣는 것처럼
여러가지 위젯을 추가해서 페이지를 디자인할 수 있다.

참고로 디자인한 페이지를 웹에서 확인하는 방법은 다음 이미지를 참고하면 된다.

1. 텍스트 위젯: Text()

home: Text('Hello World')

위와 같이 Text(’넣고싶은 텍스트’) 형태로 넣으면 페이지에 텍스트를 띄울 수 있다.

스타일을 바꾸는 것은 다음에 해보도록 하겠다.

2. 아이콘 위젯: Icon()

home: Icon(Icons.star)

Icon(Icons.아이콘이름) 의 형태로 코드를 입력하고 실행하면 페이지 가운데에 아이콘이 뜬다.

아이콘 이름은 링크에서 검색하면 된다.

3. 이미지를 넣고 싶을 땐 Image.asset()

이미지를 넣을 땐 다음 방법으로 하면 된다.

1) 프로젝트 내에 assets 폴더를 만들고 이미지 파일을 거기 넣는다
(폴더 이름은 반드시 ‘assets’로 만든다!)
2) pubspec.yaml 파일의 flutter: 부분을 찾아서 다음과 같이 수정한다.
이렇게 되면 assets 폴더 내에 있는 이미지는 모두 사용할 수 있게 된다.

flutter:
  assets:
    - assets/

3) 이미지 위젯을 사용한다.

home: Image.asset('image.png')

이런 식으로 Image.asset(’이미지이름.확장자’) 식으로 사용하면 페이지에 이미지가 뜬다.
(정확히는 Image.asset('assets/image.png')과 같이 경로를 설정해주어야하지만 굳이 안써도 잘 인식한다.)

4. 박스 위젯: Container()

박스를 넣을 땐 Container() 또는 SizedBox() 둘 중 하나를 쓰면 된다.

<Container 와 SizedBox의 차이>
1. 둘 다 height와 width를 지정할 수 있지만 Container는 크기를 지정해주지 않으면 최대 크기로 확장되는 반면, SizedBox는 내부 요소가 차지하는 만큼만 크기를 차지한다.
2. Container는 margin, padding, color 등의 속성을 설정할 수 있지만, SizedBox는 그러한 속성들을 설정할 수 없다.

Container는 여러가지 스타일 속성을 이용해 박스를 꾸미고 싶을 때 사용하면 되고, 그렇지 않을때는 SizedBox가 더 가볍기 때문에 SizedBox를 쓰는것이 좋다.

home: Container()
home: SizedBox()

그런데 그냥 이런식으로 넣으면 흰 박스가 생기기 때문에 보이지 않는다.

스타일을 설정해보자.

home: Container(width:50, height:50, color:Colors.blue)

이런식으로 크기와 색상 스타일을 지정해주고 다시 실행시켜보자.
(참고로 width와 height의 단위는 ‘LP’이다)

그럼 이렇게 뜨는데 박스가 없이 이렇게 뜨는 이유는 어디서부터 채울지 좌표를 주지 않았기 때문이다.

Center()를 통해 박스를 화면 가운데에 넣어보도록 하자.

5. 위젯 안에 위젯 넣기

박스 안에 텍스트를 넣을 땐 child: 파라미터를 이용해서 만들면 된다.

home: Center(
  child: Container(
		width:50, 
		height:50, 
		color: Colors.blue, 
		child: Text('ㅎ'),)
  )

스타일은… 다음에 지정해보자.

<참조>
코딩애플 쉬운 플러터 1강 : 기본 위젯4개 알면 기초 끝 강의