플러터 Flutter로 웹툰 앱 만들기 #4 STATEFUL WIDGETS 새로운 앱 생성 -

안녕하세요 데브런치입니다.

​

노마드코더의 Flutter로 웹툰 앱 만들기 4번째 챕터 부분 정리, 기록해 보았습니다.

​

#4 STATEFUL WIDGETS

#4.0 State (07:33)

플러터 코딩시 위젯에 관한 설명

기존 main.dart 에 새로운 코드로 타이핑 합니다.

플러터 소스의 클릭아이콘 까지 생성 및 클릭 오류 전까지 구현합니다.

소스코드(아래)

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  int counter = 0;

  void onClicked() {
    counter = counter + 1;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDD8),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "Click Count",
                style: TextStyle(fontSize: 30),
              ),
              Text(
                '$counter',
                style: const TextStyle(fontSize: 30),
              ),
              IconButton(
                iconSize: 40,
                onPressed: onClicked,
                icon: const Icon(Icons.add_box_rounded),
              )
            ],
          ),
        ),
      ),
    );
  }
}

#4.1 setState (04:40)

플러터 statefulwidget 내 setState 함수를 통해 현재 상태를 알린다.

#4.2 Recap (05:04)

앞선 강의 복습합니다.

#4.3 BuildContext (10:18)

statefulwidget 에서 BuildContext 를 사용하여 상위 계층의 설정을 불러와 사용하는 것을 설명합니다.

#4.4 Widget Lifecycle (07:18)

기존 statelesswidget 에서 statefulwidget 로 변경하여 내부의 위젯 객체를 초기화, 제거 ,빌드의 단계에 대한 이해와 사용법을 설명합니다.

​

최종 소스(아래)

import 'package:flutter/material.dart';

void main() {
  runApp(const App());
}

class App extends StatefulWidget {
  const App({super.key});

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  bool showTitle = true;

  void toggleTitle() {
    setState(() {
      showTitle = !showTitle;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red,
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDD8),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              showTitle ? const MyLargeTitle() : const Text("Nothing!"),
              IconButton(
                onPressed: toggleTitle,
                icon: const Icon(Icons.remove_red_eye),
              )
            ],
          ),
        ),
      ),
    );
  }
}

class MyLargeTitle extends StatefulWidget {
  const MyLargeTitle({
    super.key,
  });

  @override
  State<MyLargeTitle> createState() => _MyLargeTitleState();
}

class _MyLargeTitleState extends State<MyLargeTitle> {
  @override
  void initState() {
    super.initState();
    print("InitState!");
  }

  @override
  void dispose() {
    super.dispose();
    print("Dispose!");
  }

  @override
  Widget build(BuildContext context) {
    print("Build!");
    return Text(
      "My Large Title",
      style: TextStyle(
        fontSize: 30,
        color: Theme.of(context).textTheme.titleLarge?.color,
      ),
    );
  }
}