Choe's In coding...

플러터를 학습한지 며칠이 지났다.

당장 파이썬 문법만 익힌정도의 수준에서 바로 플러터를 들어가다니 무슨 자신감이였을까...

기본기를 탄탄하게 잡고 플러터를 시작하려고했으나,

시간적인 여유와 현재 공부시간을 살펴볼때 좀 더 현실적인 방법으로 진행하고자

무작정 학습을 시작하며 그때 그때  막히는 부분을 따로 공부하는 프로세스로 진행할 예정이다.

현재 플러터는 개발자 시장에서 많은 수요가 있지않다.

하지만 플러터는 충분히 발전가능성이 있고 지금도 가파르게 성장중이다.

크로스 플랫폼 개발을 할 수 있다는것은 정말 큰 장점이라 생각한다.

점점 다양해지는 소스와 활발해지는 커뮤니티를 보았을때 지금도 충분히 매리트가 있다고 생각한다.

현재 학습방법은

플러터 홈페이지, 유튜브 강의의 예제를 풀어보며 기본적인 앱 트리구조를 이해하고있다.

유튜브(코딩셰프, 코딩파파, 개발하는남자, 코드팩토리) 

어느정도 감히 잡혔다면 플러터 갤러리에 나와있는 소스코드를 적용해 나만의 앱을 커스터마이징 해보곤한다.

당분간은 프론트에만 집중하려고한다.

플러터란..?

플러터는 위젯의 집합체이다.

여러개의 위젯들로 구성된 페이지 앱이다.

그러니 위젯들만 잘 구성할줄안다면

앱 만드는것은 정말 별거 없다.

이 위젯들은 2가지 종류로 나뉜다.

어떤 값에 따라 위젯의 데이터가 바뀐다. -> Stateful Widget

어떤 값도 가지고있지 않고 변하지도 않는다. -> Stateless Widget

앱을 만들떄 이론상으론 모든 위젯을 Stateful Widget들로만 구성하여 제작해도 되지만,

이러면 앱이 너무 무거워지고 퍼포먼스가 잘 나오지 않는다.

최대한 처음 기획때 잘 구분하여야 한다.

유튜브 강의나 책들을 보면 대부분 MaterialApp에 대해서 나와있다.

그러나 플러터 업데이트 이후 CupertinoApp이 나왔는데

쉽게말하면 앱 태마? 정도로 이해하면 된다.

기본적으로는 Material이고 아이폰 감성을 원하는 사용자라면 Cupertino를 이용하면 된다.

맨 윗줄에 import를 통해 사용하면 된다.

Cupertino에 대한 예제들은 플러터 갤러리에 들어가면 다나와있어

쉽게 적용가능할것이다.

내가 적용한 예제를 한가지 보자

import 'package:flutter/cupertino.dart';

void main() => runApp(const CupertinoButtonApp());

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

  @override
  Widget build(BuildContext context) {
    return const CupertinoApp( //CupertinoApp을 사용하겠단 선언이다.
      theme: CupertinoThemeData(brightness: Brightness.light),
      home: CupertinoButtonExample(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: const CupertinoNavigationBar(
        middle: Text('CupertinoButton Sample'),
      ),
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            const CupertinoButton(
              onPressed: null,
              child: Text('Disabled'),
            ),
            const SizedBox(height: 30),
            const CupertinoButton.filled(
              onPressed: null,
              child: Text('Disabled'),
            ),
            const SizedBox(height: 30),
            CupertinoButton(
              onPressed: () {},
              child: const Text('Enabled'),
            ),
            const SizedBox(height: 30),
            CupertinoButton.filled(
              onPressed: () {},
              child: const Text('Enabled'),
            ),
          ],
        ),
      ),
    );
  }
}

플러터의 기본 구조를 이해하고있다면 위 코드를 쉽게 이해할 수 있을것이다.