[Flutter] 3. 버튼 만들기

2023.11.23 - [dev/flutter] - [Flutter] 2. 초기 프로젝트 실행

[Flutter] 2. 초기 프로젝트 실행

 

 

dart를 알지 못한채 코드를 분석해보자..

 

 

import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
import 'package:provider/provider.dart';

: 작업에 필요한 라이브러리를 불러오고

 

 

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

: main에서 앱을 실행하는 것 같다.

: runApp이라는 시스템 함수를 실행하는데 그 안에 개발자가 만든 코드를 실행하는 것 같다.

: 개발자가 만든 코드는 'MyApp'이라는 클래스

 

 

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

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => MyAppState(),
      child: MaterialApp(
        title: 'Namer App',
        theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepOrange),
        ),
        home: MyHomePage(),
      ),
    );
  }
}

: MyApp은 StatelessWidget을 상속하고 있다.

: StatelessWidget은 단어만 보면 상태가 없는 위젯...? 상태가 없다는 것이 뭘까

: const MyApp.. super.key... 아몰랑

: 그 밑에 build함수는 StatelessWidget의 함수를 가져온 것 같다.

: UI에 화면을 그려주는 역할인 것 같다.

: ChangeNotifierProvider라는 클래스를 반환하고 있고... 제공 해주는 것을 바뀐다..?

: 왠지 Hot Reload가 되는 것이 요거 때문일 것 같다.

: create: (context) => MyAppState() .... 람다를 사용하네?.. MyAppState라는 것을 불러오는데

: 이것이 body인 것 같다. 흠 근데 쭉 보아하니 뭔가 Model의 역할 같기도하다. 비즈니스 로직은 이곳에 담는건가?

: MyAppState는 비즈니스 로직인 것 같다.

: 그 아래 child가 전체적인 UI 구성 인 것 같다

: title은 html의 header - title과 동일한 것 같고, theme는 앱에 테마를 주는 것, home은 내부 body의 UI인가? 하하

 

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();
}

: MyAppState는 ChangeNotifier를 상속하고 있다... 이것이 뭔가 값이 변하는 걸 뜻하나... 찾아보자..

: 상태를 관리해주는 것이라고 한다... 애플리케이션의 상태가 변경되면 UI를 업데이트 하는데 사용된다 한다.

: 대충 내 감이 맞아서 기분은 좋네

: var current는 WordPair라는 클래스안에 난수가 적용된 값을 반환 받는 것 같다. 

 

 

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),
        ],
      ),
    );
  }
}

: MyHomePage도 StatelessWidget을 상속하고 있다... 이것도 이참에 찾아보자

: immutable한 위젯이라니.. 정말 설명이 불친절하구나... 무튼 화면을 어떻게 그릴지 도면 같은 것 같다.

: build는 그려주는 것 같고

: appState는 이전 MyAppState클래스의 로직을 계속 감시하는 것 같다.

: Scaffold 이건 또 무엇인가... 찾아보자

: Scaffold는 Flutter에서 제공하는 기본적인 UI작업 위젯이라고 한다... 하 위젯이란 말도 어렵게 느껴지는구나

: 위젯이란 화면의 요소를 뜻한다고 한다.. 나에게 위젯은 홈화면의 위젯이었는데... =_=

 

Scaffold는 기본적 material UI작업 위젯

: AppBar : 앱 상단

: Body : 앱의 메인 콘텐츠

: Drawer : 네비게이션 메뉴 슬라이딩 되는 

: BottomNavigationBar : 하단의 탐색 버튼바

: FloatingActionButton : 부동 작업 버튼

 

 

이정도면 나름 잘 해석한 것 같다.

 

---

 

버튼 추가

: onPressed 버튼을 누르면 생기는 액션 같다,

: child는 버튼 내부를 꾸며주는 것 같다.

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var appState = context.watch<MyAppState>();

    return Scaffold(
      body: Column(
        children: [
          Text('A random idea:'),
          Text(appState.current.asLowerCase),

          // Add Button
          ElevatedButton(
            onPressed: ()
           {
            print('##### button pressed');
           }, 
           child: Text('Next'))
        ],
      ),
    );
  }
}

: print는 DEBUG CONSOLE에 찍힌다.

 

 

가이드 아래에 코드 전체에 대한 해석이 있다... .... 

 

이 아래는 안읽어도 된다. 나의 생각 정리

StatelessWidget : 위젯은 모든 Flutter앱을 빌드하는데 사용되는 요소이다.

- 모든 Flutter앱이란 많은 플랫폼에 적용할 수 있게 해주는 소리인 것 같다.

 

 

MyAppState는 앱이 작동하는데 필요한 데이터를 정의

위젯들이 상태 변경을 알기 위해서 ChangeNotifier 상태 클래스로 확장한다.

상태가 만들어지면 ChangeNotifierProvider를 사용하면 전체 앱에 제공이 된다.

 

 

모든 위젯이 항상 최신 상태로 유지되도록 상황이 변경 되면 자동으로 build()함수가 호출된다.

왜이렇게 상태 변경시 확인하는 함수들이 많은 걸까...

watch메서드로 또 변경상황 추적

 

 

함수 생성

: MyAppState에 'getNext()'라는 함수를 생성한다.

: 함수는 java와 비슷한 것 같다.

class MyAppState extends ChangeNotifier {
  var current = WordPair.random();

  void getNext() {
    current = WordPair.random();
    notifyListeners();
  }
}

: getNext()함수를 사용하면 current변수가 값을 새롭게 받는다.

: 계속 감시한다면서 notifyListeners를 왜 해주는 것일까.....

: notifyListener함수를 호출하지 않으면 적용되질 않네...

 

 

          // Add Button
          ElevatedButton(
            onPressed: () {
            print('##### button pressed');
            appState.getNext();
           }, 
           child: Text('Next'))
        ],