[Flutter 002] 앱 디자인하기 (위젯 - 글자, 이미지, 아이콘, 박스)

앱 디자인

 

화면을 구성하는 많은 디자인 요소들!!

플러터에서는 위젯이라고 부른다. 

 

 

대문자로 시작하는 단어에 뒤에 소괄호가 붙는 이 구조가 위젯이다.ex)

Text('안녕')

 

 

가장 중요한 4가지 위젯

 

글자 위젯

이미지 위젯

아이콘 위젯

박스 위젯

 

이 4개만 있으면 앱에 필요한 모든 구성요소를 생성할 수 있다!

 

 

 

 

 

 

 

글자 위젯

 

Text('넣고싶은 text')

 

ex)

return MaterialApp(
      home: Text('안녕')
    );

화면

 

 

 

 

 

 

 

 

 

 

아이콘 위젯

 

Icon(Icons.아이콘이름)

 

ex)

return MaterialApp(
      home: Icon(Icons.phone)
    );

화면

※ 아이콘 이름은 Fluuter 홈페이지에 있음

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

이미지 위젯

 

Image.asset('경로')

 

이미지를 프로젝트 안에서 사용하기 위해서

 

① 이미지를 담을 assets 폴더 만들기

(폴더명은 꼭 assets)

프로젝트 우클릭 -> New -> Directory

 

 

② 이미지 드래그 해서 assets 폴더에 넣어주기

 

 

③ 이미지 등록하기

pubspec.yaml (앱에 필요한 자료들을 정리해놓은 파일)

 

여기에 flutter: 안에 이렇게 작성

assets의 폴더 안의 파일들을 사용하겠다고 명시

 

 

 

ex)

    return MaterialApp(
      home: Image.asset('assets/jw.jpg')
    );

화면

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

박스 위젯

 

 

Container( width :  ,  height:  ,  color :  )

SixedBox( width :  ,  height:  ,  color :  )

 

 

(여기서 사이즈의 단위는 LP)

 

 

ex)

    return MaterialApp(
      home: Center(
        child: Container( width: 50, height: 50, color: Colors.blue),
      )
      //== home: SizedBox()
    );

여기서 Container 위젯의 기준을 만들어주기 위해 Center라는 부모 위젯을 생성하고 Container 위젯을 그 자식으로 넣어줌

 

화면

 

 

 

 

 

 

 

 

 

 

 

 

레이아웃 만들기!! -----> (다음게시글)