[Flutter] Flutter 공부시작

그동안 안드로이드 스튜디오만으로 작업하다가 요즘에 Flutter에 대해 관심이 있어지면서 공부를 시작하게 되었다.

여러가지 장점들이 있지만 무엇보다 안드로이드와 ios에서 작동가능하다는 점과 개발한 폰의 화면을 바로바로 확인할 수 있다는 점이 큰 메리트인 것 같다.

안드로이드 스튜디오를 통해서 Flutter를 코딩하였는데 처음부터 차근차근 보도록 하겠다.

import 'package:flutter/material.dart';

제일 먼저 flutter의 위젯들을 사용하기 위해서 material.dart를 import 시켜준다.

그리고 void main() => runApp(MyApp()); 라고 입력해서 MyApp을 먼저 실행할 수 있도록 해준다.

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
      title: "slondy"
    );
  }
}

그리고 stl을 입력하면 자동으로 StatelessWidget을 만들 수 있게되는데 위젯은 크게 StatelessWidget과 StatefulWidget으로 나뉘어진다.

Flutter는 모두 위젯으로 구성되어 있는데 간단히 말하면 Stateless는 정적, Stateful은 동적이라고 생각하면 된다.

일단 간단하게 만들어볼 화면은 움직이지 않고 보여지는 화면만 만들 것이기 때문에 Stateless로 만들어주었다.

위 코드를 보면 return 값을 MaterialApp으로 해주고 안에 home 부분은 내가 만들 위젯, title에는 앱의 이름을 입력해준다.

그 다음에는 아까 정의해준 MyHomePage라는 위젯을 만들어줄 차례이다.

앱의 화면이 보여질 부분이라고 생각하면 된다.

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('slondy'),
        centerTitle: true,
        backgroundColor: Colors.blue[300],
        elevation: 0.0,
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(30.0, 20.0, 0.0, 0.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Text('Hi')
          ],
        ),
      ),
      backgroundColor: Colors.blue[100],
    );
  }
}

이번에도 똑같이 stateless로 위젯을 만들어주고 return값을 Scaffold라고 해준다.

Scaffold는 dart의 위젯들을 이용할 수 있도록 도와준다.

appBar 부분은 앱의 상단바 화면인데 title에는 앱바에 나타날 텍스트, centerTitle은 boolean 형식인데 true로 해주면 글자가 화면의 가운데에 배치되게 된다.

backgroundColor는 말 그대로 앱바의 색깔이고 elevation은 앱바가 공중에 떠있는 듯한 효과를 주는 것인데 본인은 0.0으로 해서 효과를 없앴다.

그 다음은 앱의 화면 부분인 body 부분이다.

먼저 Padding을 활용해서 가장자리에 딱 달라붙지 않고 공간을 주었다.

EdgeInsets.fromLTRB(30.0, 20.0, 0.0, 0.0)를 사용해서 왼,위,오,아래 부분의 공간을 설정해준다.

그리고 child: Column을 사용하였는데 Column은 세로로 정렬하는 거라고 생각하면 된다.

그리고 Column안에 mainAxisAlignment: 부분은 가로 정렬이다.

안에다가 MainAxisAlignment.start라고 입력하여 왼쪽부터 가로정렬 하도록 해주었다.

마지막으로 children: [ Text(‘Hi’) ] 라고 입력하여 Text를 하나만 배치해주었다.

그리고 BackgroundColor가 또 나왔는데 이것은 앱의 body부분의 배경화면 색을 정해주는 것이다.

이렇게 기본적인 구성들만 입력해보았는데 어떤 결과가 나왔는지 한번 확인해보자.

위와 같이 설정한대로 정상적으로 나오는 것을 볼 수 있다.

아직 갈길이 멀지만 열심히 Flutter를 공부해서 나중에 원하는 앱을 플레이스토어와 앱스토어에 출시하는 날을 기대해봐야갰다.