flutter study - 01 widget 만들기

flutter에서 앱 디자인 하는 법 : 위젯을 짜집기 한다.

아래는 안녕이라는 text 위젯 만들기
lib/main.dart 파일이 홈페이지 만드는 파일

import 'package:flutter/material.dart';  


    # 앱 구동하기
    void main() {  
      runApp(const MyApp());  
    }  
    
    # 앱 메인 페이지 만들기. 아래 4줄은 그냥 항상 있는거
    # stless 입력하고 tab 누르면 자동 생성
    class MyApp extends StatelessWidget {  
      const MyApp({Key? key}) : super(key: key);  
      
      @override  
      Widget build(BuildContext context) {  
    
    # 아래에 메인 페이지 내용 코딩하면 됨
        return MaterialApp(  
          home: Text('Hello')  
        );  
      }  
    }

글자넣을땐 Text()

home: Text('Hello')

아이콘 넣을땐 Icon()

home: Icon(Icons.star)

home: Icon(Icons.shop)

아이콘 이름은 플러터 홈페이지 참고

이미지 넣을땐 Image.asset('경로')

프로젝트 폴더하위에 assets 라는 폴더 만들고 pubspec.yaml 파일에서 flutter 하위에 아래 내용추가
assets 폴더에 있는 내용 모두 assets로 등록하겠다는 뜻

flutter:  
    assets:  
      - assets/

예시

home: Image.asset('assets/dance.gif')

박스 넣을땐 Container() 또는 SizedBox()

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

예시 대로 하면 사이즈는 입력했는데 위치 정보가 없어서 전체 화면이 파란색으로 됨

사이즈 단위는 LP

• Flutter의 모든 단위는 LP(Logical Pixel)
• 를 사용하지 않는 이유는 기기마다 픽셀의 절대적인 크기가 다르기 때문
• 1cm = 38LP
• 50LP == 1.2cm

Center 위젯

내 자식 위젯의 기준점을 정중앙으로 설정해줌
child 위젯인 Container의 위치를 정중앙으로 설정해준다

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