플러터(Flutter) 입문 4. 다트(dart)파일 만들기

플러터는 다트 라는 언어를 사용합니다.

 

웹에서 html css js 파일을 따로 만들어 관리하듯

플러터도 dart라는 파일을 만들어서 관리합니다.

 

사실 1개의 dart파일에 모든 정보를 다담을수 있습니다.

그런데 개발할때 다트파일 한장에 5만줄 이렇게 되면 해석하기 힘들잖아요

그래서 다트파일별로 나누는데

저같은경우는 1개의 class는 1개의 다트파일로 관리하고 있습니다.

그리고 이름짓는 방식도 나름의 규칙을 가지고 하고 있습니다.

 

역시 긴 설명보다는 그냥 우선 한번해보죠.

 

 

1. 다트(dart) 파일 만들기

 

왼쪽에 폴더트리를 보면

lib 가 보입니다.

앞으로 우리가 만드는 다트파일은 모두 이쪽에 들어갑니다.

여기에 New - Dart File 을 클릭하시면 새로운 다트 파일이 생성 할 수 있습니다.

 

그런데 저는 상위폴더를 한개 두고싶네요.

그래서 일단 상위폴더부터 만들어 볼겁니다.

 

바로 다트 파일을 만들지 마시고

Package 를 클릭해주세요.

 

 

 

그러면 이렇게 폴더 명을 지을수 있습니다.

여기이름이 package라고 쓰여있어서 해깔리는데 그냥 우리가 일반적으로 파일관리하는 폴더라고 생각하시면 됩니다.

앞으로 폴더라고 지칭하겠습니다.

 

testpages 라는 폴더를 만들면 거기에서 같은방식으로 다트파일을 만들어줍니다.

 

 

secondman 이라고 이름을 지으니 다트파일 하나가 만들어집니다.

아무 이름이나 지어 보세요.

 

 

여기에 뭘할꺼냐면

 

다른페이지를 만들어볼겁니다.

 

우리가 입문2 강에서 했던것처럼 StatelessWidget을 extends 하는 클래스를 만들어볼겁니다.

(생각이 안나시면 다시 2강으로 가서 한번 보고 와주세요.)

 

이렇게 적어주세요.

이렇게 하면 빨강줄로 오류가 뜹니다.

 

그이유는 StatelessWidget은 material.dart 라는 파일에 있는 무엇인가가 필요하기 때문입니다.

 

근데 우리는 material.dart 라는 다트파일을 만든적이 없습니다.

그런데 왼쪽에 파일을 디져보면 나옵니다. 플러터가 기본적으로 내장하고 있는 다트파일인것이죠.

 

어쨋든 그 파일을 땡겨와야합니다.

 

그러기 위해서 첫줄에 이렇게 작성합니다.

 

import 'package:flutter/material.dart';

 

그러면 오류가 사라집니다.

 

근데 어느세월에 한땀한땀 타이핑을 하겠습니까?

 

다 자동으로 해주는것들이 있습니다.

import 'package:flutter/material.dart';

 

이거 같은경우도 사실 im 만 쳐도 추천키워드가 뜨잖아요?

그다음 ' ' 사이에 ma만쳐도 또 추천 키워드가 뜨죠

 

 

근데 이거보다 쉬운방법은 빨강줄되는곳에 마우스를 클릭한번해주고 Alt + enter 치면 이렇게 import를 뭐할것인지 묻습니다.

거기서 골라주시면 됩니다. 그러면 윗줄에 자동적으로 적힙니다.

 

 

 

그리고 이거 적는것도 쉽게 할수있는데요.

 

class SecondMan extends StatelessWidget{

@override
Widget build(BuildContext context) {
return Scaffold();
}

}

 

2. 좀더 쉽게 클래스 생성하기

 

그냥 s 이라고 쳐줍니다.

 

s만쳐도 맨위에 stless 라고 뜨고 뒤에 설명보니 New Stateless widget이라고 적혀있죠.

그걸선택해봅니다.

 

 

그러면 이렇게 자동적으로 생성됩니다.

그러면 이름만 적어주고

아래에 return 되는 부분만 바꿔주면 되는거죠.

 

저는 이름을 SecondMan 이라고 적었습니다.

return 되는 부분도 Scaffold() 로 바꿨어요.

 

그러면 저렇게 빨갛게 오류가 뜨는데요,

StatelessWIdget, Widget 등 저기 빨간줄 4개가 쳐져있죠?

저거 4개 전부 빨강줄인이유는

 

material.dart 라는 다트파일안에 들어있는 어떤 함수나 클래스나 그런것들을 참조해야하기때문입니다.

 

아까 위에서 한것과 마찬가지로 import를 해줘야합니다.

빨강줄에 마우스대고 Alt+enter 치면 자동적으로 저렇게 추천이 뜹니다.

저기서 맨위에 Import library .....되잇는거 저거를 선택해줍니다.

 

 

 

 

그러면 위에 초록글씨로 뭐 적혔죠?

 

그리고 오류가 사라진게 보입니다.

 

 

이렇게 다트파일 만들어 봤습니다.

다음포스팅에서는 페이지 넘어가기를 해보겠습니다.

 

 

-----------------공지-------------------

23년 버전 앱강의를 오픈했습니다. 관심있으신분은 클릭 ㅋㅋ

2023.07.29 - [코딩생초보를 위한 플러터 빠르게 한바퀴] - 1. create project

1. create project

개인과외 문의 saran.flutter@gmail.com