플러터 기본 위젯 넣는 법(글자,아이콘,박스,이미지) , Lint 끄는 방법

시작하기 전에 Lint 관련 워닝 무시하는 법 

 

Flutter 2.5 버전 이후 부터는 Lint라는게 생겨서 여러분에게 좋은 관습같은걸 알려주는데

초보땐 그런거 하나하나 지키면 복잡해서 코딩 포기하기 때문에 나중에 익숙해지면 씁시다. 

그래서 analysis_options.yaml 파일 열어서 

 

(analysis_options.yaml)

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

이걸 추가해두고 시작하면 Lint 경고가 뜨지 않습니다. 

(주의) rules: 보다 prefer어쩌구: 가 스페이스바 2개만큼 앞에 있어야합니다.

 

main.dart 파일에 코드짜면 됩니다

 

lib 폴더 안에 있는 main.dart 파일을 열어봅시다. 그게 우리 앱 메인페이지입니다. 

 

import 'package:flutter/material.dart';

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

일부 프로그래밍 언어들은 main() 함수가 있습니다.

거기 안에 코드짜셔야 실행이 됩니다. 

void는 "이 함수는 아무것도 return 하지 말아주세요~" 라는 뜻인데 알 필요 없습니다. 

runApp() 이건 "앱 시작해주세요~" 라는 기본 함수입니다. 

runApp() 소괄호 안에 여러분들이 만든 앱 레이아웃을 넣으면 진짜로 앱으로 보여줍니다.

 

 

MyApp 메인페이지 만들기

 

 

그럼 이제 다음과 같은 코드를 하단에 추가해줍니다. 

 

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {

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

  }
} 

에디터에서 stless라고 치고 탭키 누르면 저거 자동완성 됨

 

위젯 만들기

 

HTML 개발방식은 <태그> 사용입니다.

글자 넣고 싶으면 <p> 이미지 넣고 싶으면 <img> 네모박스 넣고 싶으면 <div> 

이렇게 태그를 사용합니다. 

 

Flutter 개발방식은 위젯() 사용입니다. 

글자 넣고 싶으면 Text() 이미지 넣고 싶으면 Image() 네모박스 넣고 싶으면 Container() 

이렇게 위젯을 사용합니다. 

Flutter에서 위젯 4개만 잘 외워두면 거의 모든 레이아웃을 만들 수 있는데

글자, 이미지, 아이콘, 박스 이렇게 4개 위젯 외워두면 됩니다.

 

머터리얼앱, 스캐폴드는 어디에 쓸까

바로 텍스트 위젯을 쓰면 편할텐데 머터리얼앱이랑 스캐폴드로 감싸고 있죠.

둘 다 구글 머터리얼 디자인을 쓰기 위해서 필요합니다.

• 머터리얼앱 (MaterialApp) - 구글 머터리얼 디자인을 쓰겠단 뜻이에요. 전체 앱의 테마, 색깔등을 정할 수 있습니다.

• 스캐폴드 (Scaffold) - 기본적인 머터리얼 디자인 구조를 잡아줍니다. 뼈대라고 보시면 되요.

https://software-creator.tistory.com/10  참고

 

 

글자넣고 싶으면 Text()

 

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

앱에 글 적고 싶으면 Text() 위젯 하나 넣어보시면 됩니다.

Text() 위젯 안에 파라미터로 적고싶은 글 넣어주시면 실제로 앱으로 보여줍니다. 에디터 상단 재생버튼 눌러서 미리보기 띄워보십시오

안보이면 파일저장이나 미리보기 화면 새로고침 해보셈

 

둘째 파라미터부터는 텍스트의 색, 크기, 폰트종류같은 스타일을 넣어줄 수 있습니다.

스타일넣는건 나중에 합시다. 

 

 

 

 

 

아이콘 넣고 싶으면 Icon()

 

Icon() 위젯을 쓰면 됩니다. 내부엔 아이콘 이름을 적으면 되는데

아이콘 이름은 https://api.flutter.dev/flutter/material/Icons-class.html 여기서 직접 찾으면 됩니다. 

거기서 찾은 아이콘 이름을 Icon(Icons.아이콘이름) 이렇게 첨부하면 아이콘 넣기 끝입니다. 

 

MaterialApp(
  home: Icon(Icons.star)
)

별 모양 아이콘이 보입니다.

 

 

이미지 넣고싶으면 

 

1. 프로젝트 내에 assets 폴더 만들고 이미지 파일을 거기 넣어둡니다

2. pubspec.yaml 파일을 찾습니다. 앱만드는데 필요한 파일과 라이브러리들을 기록하는 파일입니다.

 

 

(pubspec.yaml 파일)

flutter:
  assets:
    - assets/ 

3. 중간 부분에 flutter: 하위항목에 님들의 폴더를 등록해줍니다. 그럼 이제 그 폴더에 있는 이미지들 전부 사용가능 

dog.png 파일을 넣어뒀는데 이걸 쓰고 싶으면

 

MaterialApp(
  home: Image.asset('assets/dog.png')
)

Image.asset('이미지경로') 이렇게 위젯을 넣으면 됩니다.

그럼 이제 이미지가 보이겠군요. 

브라우저로 미리볼 땐 dog.png만 써도 될 수도 있습니다 

 

폰으로 실행해서 볼때는 전체 경로를 입력 해줘야함 (절대경로 )

 

네모 박스 넣고 싶으면 Container() 

 

MaterialApp(
  home: Container()
)

Container() 아니면 SizedBox() 둘 중 하나 쓰면 네모 박스가 생성됩니다. 

근데 안보인다고요? 색상같은 스타일을 넣으면 보입니다.

 

박스와 이미지 위젯들의 사이즈 조정은 어떻게 하냐면

width, height 이런 파라미터를 위젯에 집어넣으면 됩니다.

width, height에는 정수, 실수 넣을 수 있고 단위는 적지 않습니다. 

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

그래서 Container 안에 width, height, color 주려면 저렇게 쓰면 됩니다. 

 

Flutter의 모든 단위는 LP입니다. Logical Pixel 이라고 부르는데 

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

10cm 크기의 폰에 픽셀을 가로로 500개 쑤셔박는 폰도 있고

10cm 크기의 폰에 픽셀을 가로로 2000개나 쑤셔박는 폰도 있으니까요

그럼 기기마다 50px이 다르게 보이겠군요

 

근데 LP는 그냥 현실에서 쓰는 cm, inch 이런 단위랑 똑같다고 보시면 됩니다. 우리가 눈으로 보는 절대적인 수치입니다.

1cm는 38LP 입니다,

그래서 width : 50이면 1.2cm 정도 되겠군요 

 

 

Q. width, height, color를 줘봤는데 박스가 아직도 화면에 꽉차고 큰데요?

- 꽉차는 이유는 원래 Container 그냥 쓰면 자리를 최대한 차지하려고 합니다

- width, height가 안먹는 이유는 "컴퓨터가 박스를 어디서부터 가로세로 50만큼 그려야할지 모르기 때문에" 그렇습니다. 

 

 

 

그래서 width, height를 주고 싶으면 어디서부터 채울 지 좌표를 주어야합니다.

(X, Y position을 주어야합니다)

근데 그건 직접 줄 필요 없고 보통 Center() 혹은 Align() 이런 위젯을 이용합니다.

이런 위젯 안에 담으면 자동으로 X, Y position을 잡아주기 때문에 이제 width, height가 잘 먹을겁니다. 

 

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

그래서 Center 안에 Container를 하나 넣어봤습니다. 

Center() 위젯은 자식 child 위젯의 position을 정가운데로 잡아주는 유용한 위젯일 뿐입니다. 그게 다임

 

 

 

 

 

 

위젯 안에 위젯넣기

 

위 예제처럼 위젯 안에 위젯을 넣을 수 있습니다. 

예를 들어 박스 안에 글자넣고 싶으면 

Container( Text() ) 이렇게 쓰는 것인데 그냥 넣으면 안되고

child 라는 이름의 파라미터로 집어넣으셔야합니다.

그럼 위젯 안에 위젯넣을 수 있음 

 

 

MaterialApp(
  home: Container( 
    child: Text('박스안 글자임ㅅㄱ')
  )
)

child: 파라미터를 이용하면 

위젯 안에 위젯을 넣을 수 있다는 사실 잘 기억해두십시오 

HTML로 비유하자면 <div><p>바보야<p></div> 이런거 만든겁니다.

다른 앱개발 프레임워크로 비유하자면 <View><Text>바보야</Text><View> 이런거 만든겁니다.

 

 

그리고 

 

이렇게 위젯은 트리 구조로 이루어 진다고 생각하면 이해하기 쉽고 나중에 개발할때 그려가면서 아이디어를 구상할수도 있습니다.

 

1. 

이미지 출처: https://www.youtube.com/channel/UC_2ge45JCuJH1z6VYt4iCgQ

코딩셰프

 

 

전체 글은 https://codingapple.com/

플러터 강의를 참조 했습니다 

 

 

전체 소스

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp()); // 앱 메인 페이지 입력하면 됩니다.
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:Center(
          child:  Container(width: 50, height: 50,color: Colors.blue),
        )
    );
  }
}