스마트시대

2-2.Buildcontext, wedget life cycle 본문

Programing/Flutter

2-2.Buildcontext, wedget life cycle

스마트시대 2023. 3. 31. 16:05
728x90
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> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(  // here
        textTheme: const TextTheme(
          titleLarge: TextStyle(
            color: Colors.red, // here
          ),
        ),
      ),
      home: Scaffold(
        backgroundColor: const Color(0xFFF4EDDB),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              MyLargeTitle(),
            ],
          ),
        ),
      ),
    );
  }
}

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

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

null 발생 상황에 대해서 

! 사용하면 런타임에 예외를 발생, 

? 사용하면 null 을 리턴하고 예외를 발생 시키지 않는다 정도로 이해하는데 

? 사용 하는것이 코드가 더 안전하다고 ? 사용을 권장

 

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;  //here

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

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

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

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

class _MyLargeTitleState extends State<MyLargeTitle> {
  int count = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    print('initState');
  }

  @override
  void dispose() {
    // TODO: implement 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,
      ),
    );
  }
}

flutter의 생명주기 

1. initState() build를 하기 전에 항상 먼저 실행된다. 대표적으로 API를 불러올 때 사용된다. 

2.dispose() 화면에서 사라질 때 실행한다.

728x90
반응형
Comments