플러터 기초 01

[공부하며 기록하고 잊어버렸을때 찾아보는 용도로 만든 페이지이다. 다만 혹시 필요한 분들 있을까 싶어 공개한다.]

 

안드로이드 스튜디오에서 플러터를 실행할 수 있는 모든 준비를 마치면 새로운 플러터 프로젝트를 시작한다.

 

플러터를 코딩할 주 페이지는 

[프로젝트명 > lib > main.dart] 페이지 이다.

 

프로그램을 짜기전에 이런저런 설정을 해야 한다.

 

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 경고는 뜨지 않는다.

 

 

처음 실행하면 이런 저런 예제를 넣어두었다. 모두 필요없으니 삭제하자.

 

import 'package:flutter/material.dart';

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

위 구문만 남겨두고 모두 삭제한다.

그리고 하단에 

st만 입력해도 stless 가 자동완성으로 나타난다.

해당 코드를 선택하면 필요한 기본 코드가 작성된다.

그리고 커서가 깜박이는 네임 정하는 부분를 MyApp 이라고 적어준다.

이것은 void main() 함수에서 처음으로 호출하는 함수명이다.

이름은 변경 가능하다.

변경하면 아래있는 클래스의 이름도 변경해야 한다.

 

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Text('asdas'),
    );
  }
}

위와 같이 코드를 추가해주면 코딩할 준비가 되었다.

여기에 위젯을 집어넣어서 플로그램을 짠다고 보면 된다.

 

왼쪽 트리구조에 assets 라는 폴더가 있는데 거기는 이미지 같은 것을 넣을때 사용한다.

(pubspec.yaml 파일)

flutter:
  assets:
    - assets/

pubspec.yaml 파일에서 위와 같이 내용을 조금 수정해준다. 이럼 사용할 준비가 끝이다.

 

웨젯은 기본적으로 네개의 위젯이 있다.

우선 텍스트 위젯, 이미지 웨젯, 아이콘 위젯, 박스 위젯이 있다.

각각의 웨젯을 불러오려면 다음과 같이 한다.

 

//텍스트 위젯
MaterialApp(
  home: Text('안녕')
)

//아이콘 위젯
MaterialApp(
  home: Icon(Icons.star)
)

//이미지위젯
MaterialApp(
  home: Image.asset('assets/dog.png')
)

//박스위젯
MaterialApp(
  home: Container()
)

박스의 경우는 스타일을 정의해 줘야 한다.

//기본 박스위젯에 크기 정하고 색깔 정할때
MaterialApp(
  home: Container(width : 50, height : 50, color: Colors.blue)
)

//가운데 오게 하려면 
MaterialApp(
  home: Center( 
    child: Container(width : 50, height : 50, color: Colors.blue) 
  )
)