3강 Flutter 기본 위젯 넣는 법

 

맥에서 한글 작성시 오류 typo 해제하는 법

 

Android Studio => Preferences(설정) => Inspection => Profile: Default 설정 => Proofreading 체크 해제 

 

 

Lint 잠시 끄는 법 

 

rules 쪽에 내용들 추가하면 됨. 초보 때는 끄고 하는 것도 좋은 방법임. 

 

 

main.dart 파일 기본 코드 분석

 

 

main.dart 파일에서 stless를 치고 탭 키를 누르면 

 

이렇게 뜨는데, 앞에 MyApp을 붙여준다. 

 

return Container()를 return MaterialApp( home: )으로 바꿔준다. 

 

각각의 코드를 살펴보자.

 

import 'package:flutter/material.dart';

이것은 다른 파일이나 패키지 가져오는 문법이다.

 

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

runApp은 '앱 구동시켜주세요~' 라는 의미이다.  반드시 void main(){} 안에다가 코드를 짜야 실행이 된다. (Dart 언어 특수성) 

runApp() 안에다가는 앱의 메인 페이지를 입력하면 된다. 

 

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

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

 앱의 메인 페이지를 만들고 싶다면, 이 코드를 적어야한다. 위에서 부터 4줄은 세팅하기 위한 기본 문법이라고 보면된다. 

 

 

 

Flutter에서 앱 디자인 방법

 

한마디로 위젯 짜집기라고 보면된다. 

ex) 글자를 넣고 싶다? => 글자 위젯을 넣자!

 

위젯은 보통 '대문자'로 시작을 한다.

글자를 넣고 싶으면 Text('글 내용') 처럼 쓰면 된다.

 

그냥 Text()를 넣게되면 빨간글씨에 노란색 하이라이트가 표시된다.

이는 그냥 텍스트를 넣었을 때 보여주긴 하지만, appBar나 다른것을 이용해서 쓰라는 약간의 조언?경고? 이다.

 

 

꼭 알아야할 위젯 4개 

1. 글자 위젯

2. 이미지 위젯

3. 아이콘 위젯 

4. 박스 위젯 

 

 

 

아이콘 위젯 넣는 법 

마찬가지로 Icons.shop도 있다. 자세한건 Flutter 홈페이지에 나와있다. 

https://api.flutter.dev/flutter/material/Icons-class.html

Icons class - material library - Dart API

 

 

 

상세 조정은 이런식으로 한다. 옆에 미리보기 띄어주기는게 대박 신기하다.

 

 

 

이미지 위젯 넣는 법

위 이미지와 같은 형식으로 코드를 작성하면 된다.

 

이를 위해선 assets 폴더를 만들어줘야 한다. 이는 프로젝트 우클릭 => New => Directory 클릭 후 작성하면 만들어진다.

정확히 assets 라고 작명을 해주어야 한다. 

 

 

여기서 끝나는게 아니라, 이미지 등록도 해주어야 한다 ( 번거롭네 ㅠ)

pubspec.yaml 같은 경우는 앱 만들 때 필요한 모든 자료들을 정리한 파일로 생각하면 된다. 

우측에 -assets/ 의미는 'assets 폴더 다 갖다 쓰겠습니다.' 라는 뜻이다.

 

이제 위와 같이 경로를 적어주면 된다. 

 

 

 

이미지가 잘 출력 된 것을 볼 수 있다. 

 

 

 

 

박스 위젯 넣는 법 

 

Container() 또는 SizedBox() 둘 중에 하나 선택해서 쓰면 된다. 

괄호안에 아무것도 넣지 않으면, 빈 화면만 보인다. 이를 해결하려면 

괄호 안에는 속성 값들을 넣어주어야 한다. 단위 같은 경우는 px이 아니라, LP 이다. 

 

LP는 Logical Pixel 이다.

px로 넣지 않는 이유는 기기마다 픽셀의 절대적인 크기가 다르기 때문이라고 한다.

LP는 cm,inch 이런 단위랑 유사하게 그냥 현실에서 쓰이는 단위와 비슷하다. 눈에 보이는 절대적 수치이다.

38LP => 1cm

width:50 => 약 1.2 cm 

 

 

 

※주의할 점은 어디서부터 50을 차지할지를 지정을 해주어야 한다.  이는 부모를 통해서 가능하다.

Center()는 내 자식 위젯의 기준점을 중앙으로 설정해주는 위젯이다. 

child에 Container를 넣어준다. 

(약간 justify-content: center; 느낌이 난다.) 

 

웹에서 레이아웃 만드는 것이랑 유사하다. <div><h1></h1></div> 이렇게 하듯이, 

위젯 (child : 위젯() ) 이런식으로 작성하면 된다. 

 

박스가 잘 나타난다 :) 

 

 

 

느낀점

문득 공부하다가 이런 생각이 들었다. 나 혼자 잘나자고 하는 것도 아니고, Flutter 강의를 처음 수강하는 친구들,

그리고 코딩을 접하는 친구들은 굉장히 낯설고 힘들거 같다는 생각이 들었다.

그래서 가입하고 싶은 사람들만 가입시켜서 같이 정보도 나누고, 스터디를 할 수 있는 환경을 만들어 주고 싶다는 생각을

하였다.

적어도 단톡방이라도 만들거나, 줌 안에서 스터디를 꾸려서 커뮤니티를 만들어 정보도 공유하면 좋겠다는 생각이 들었다.

교수님에게 제안해볼까? 

 

 

 

 

참고한 강의

 

https://codingapple.com/

코딩애플 온라인 강좌 - 개발자도 단기완성!