flutter 이론 시작

오늘은 flutter를 해보겠습니다.저는 안드로이드 스튜디오로 하겠습니다.

1번이 프로젝트 구조

2번이 코드 입력하는 부분

3번은 우리가 만든것들이 나오는 부부 즉 웹페이지라고 생각하시면 됩니다

4번은 콘솔창 vscode에서 터미널이라고 생각하면 됩니다. 다른점은 웹은 console.log가 웹페이지에서 떴는데 여기서 print라고 있는데 그게 여기서 나옵니다.

그럼 우선 2번부분은 다지우고 처음부터 하나씩 설명하면서 할께요.

우선 기본 패키지

import 'package:flutter/material.dart';

이걸 입력해주세요  실질적으로 외부에 보이는 코드를 작성할때는 이것을 꼭 넣어야됩니다. 물론 예외가 있을수도 있어요

그다음 우리가 실행하면 어떤 함수를 실행할지 정해줘야되는데 그것을 보통 이름을 main으로 합니다 그래서 여기서도 

void main(){runApp(app);}

이런식으로 만들어주면 실행시키면 main함수를 실행시켜줍니다.

runApp()은 괄호 안에있는 또 다른 함수를 실행시켜 주는 거라고 생각하시면 됩니다.

그럼 괄호안에 MyApp()이라고 넣어주고  함수를 만들어보겠습니다.

그 다음줄에 stl까지 치면

이렇게  나오고 엔터 치면 

이렇게 나오고 MyApp이라고 이름 정해주면

이렇게 함수가 자동으로 완성됩니다. 즉 stl은 정적페이지라고 생각하시면 좋습니다.

react도 return하는 것들이 페이지로 나타났으니 여기서도 return하는것이 페이지에 나타나게 됩니다.

그리고 여서기 widget이라느게 있는데 이건 웹에서 div,h 이런 태그들을 생각하시면 편하실것입니다.

그럼이제 본격적으로 앱을 만들어보겠습니다.

return MaterialApp();하고 괄호 안에서 ctrl+space 치면 

이런식으로 안에 들어갈수 있는 요소들이 있습니다. 즉 MaterialApp도 함수 형식이므로 안에 들어갈수 있는 인자가 있다고 생각하시면 좋을것입니다.

여기서 key는 

여기서 title과 home을 활용해보자 title은 우리가 핸드폰 쓸떼 작업표시줄처럼 켜놓은거 볼때 뜨는 이름이라고 생각하면 됩니다.

그리고 home은 내가 실제 앱에 뛰울 내용이라고 생각하면 됩니다 그럼 stl로 MyHome함수를 만들어 보겠습니다.

여기서 Scaffold를 사용하고 그안에 body인자로 넣을 내용을 적어주면 됩니다. 현재저는 글자 hi를 넣어줬습니다.

여기 자세 왼쪽위에 보면 시간 나오는건 왼쪽에 hi가 보일것입니다.

즉MaterialApp은   컴퓨터 인터넷으로 치면 chrome이나 또는 창한개  라고 생각 하실수 있고 

Scaffold는 실제로 우리가 클릭하는 부분 이라고 생각하시면 됩니다.

그래서 App실제 내용 작성 전인 MaterialApp에서는 글자 작성시 그냥 'hi'만 사용했고

Scaffolsd에서는 Text('hi)이렇게 사용하게 되었습니다.

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'hi',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('hellow'),
      ),
      body: Text('hi'),
    );
  }
}

 우선 기본적이  함수 인자 몇개만 살펴보면 theme는 ThemeData함수를 받아서 기본적인 글자색깔 크기 이런걸 설정해주는 것입니다.  primarySwatch로 red를 넣어주면 자동으로 appbar 색깔이 빨간색이 됩니다.

debugShowCheckedModeBanner 이거는 오른쪽 위에 나오는

이 Debug띠를 나오게 할지 지우질  정하는 용입니다. 

home 아까 말씀했듯이 Scaffold를 넣는 부분이라고 생각하시면 됩니다

Scaffold부분을 보면

appbaar 는 AppBar함수를 바아서 진자appbar을 만드는 것입니다. AppBar 안에 title에 글자를 넣으면 그 글자가 appbar안에 들어가게 됩니다.

body는 appbar 밑에 들어갈 진짜 내용을 적는 것입니다. 

현재 Text 위젯을 사용해서 안에 글자를 넣어 줬습니다.

그결과 

이렇게 설계한대로 나오게 됬습니다.

오늘은 여기까지하고 내일부터 body에 들어가는것들을 설명하도록 하겠습니다.

 

잘모르시는 부분은 코딩셰프 강의를 들어보면 좋을거 같습니다.