앱 개발 입문 수강 기록 6일 차_2023-02-25

강좌명

CH01_07. Stateless, Stateful 위젯 넣어보기

1. 여러 위젯 같이 써보기
   1. Stateful 위젯 (동적)
      1. 현재 상태를 가지고 있는 위젯
      2. 상태에 따라 UI가 변경될 때 Stateful 위젯을 사용
      3. StatefulWidget과 State 2개의 클래스로 사용
   2. Stateless 위젯 (정적)
      1. 상태를 가지고 있지 않는 위젯
      2. 상태에 따라 UI가 변경되지 않을 때 Stateless 위젯을 사용
   3. Stateful
      1. createState()
         1. Stateful 위젯을 생성하는 메소드
      2. initState()
         1. Stateful 위젯이 처음 생성될 때 호출되는 메소드
         2. 데이터를 초기화할 때 사용
      3. setState()
         1. 위젯의 상태 변경을 호출하는 메소드
      4. dispose()
         1. 위젯이 제거될 때 사용

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int _idx = 0;
  Color color = Colors.blue;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    color = Colors.green;
  }
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("패스트캠퍼스 테스트"),
      ),
      body: Center(
        child: GridView.count(
          crossAxisCount: 2,
          childAspectRatio: 1,
          children: <Widget>[
            InkWell(child: Container(child: Text("이름"),
              margin: EdgeInsets.all(16),
              padding: EdgeInsets.all(16),
              color: color,
            ),
            onTap: (){
              setState(() {
                color = Colors.redAccent;
              });
              },
            ),
            Text("이름"),
            Text("이름"),
            Text("이름"),
            ListTile(
              title: Text("이름"),
              trailing: Text("ntts"),
              onTap: () {
                print("ntts9990");
              },
            )
          ],
        ),
      ),
    );
  }
}

1. 페이지 이동하기
   1. Navigator
      1. 플러터에서 화면을 관리하는 클래스
      2. Stack(LIFO: Last-IN First-OUT)으로 화면을 쌓는 구조
      3. Navigator.push: 새로운 페이지로 이동
      4. Navigator.pop 페이지 종료 / 뒤로가기
   2. MaterialPageRoute
      1. 플러터에서 화면을 추가하는 클래스

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;
  int _idx = 0;
  Color color = Colors.blue;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  void initState() {
    super.initState();
    color = Colors.green;
  }

  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Center(
          child: GridView.count(
            crossAxisCount: 2,
            childAspectRatio: 1,
            children: <Widget>[
              InkWell(
                child: Container(
                  child: Text("이름"),
                  margin: EdgeInsets.all(16),
                  padding: EdgeInsets.all(16),
                  color: color,
                ),
                onTap: () {
                  setState(() {
                    color = Colors.redAccent;
                  });
                  Navigator.of(context).pop();
                },
              ),
              Text("이름"),
              Text("이름"),
              Text("이름"),
              ListTile(
                title: Text("이름"),
                trailing: Text("ntts"),
                onTap: () {
                  print("ntts9990");
                },
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(onPressed: () {
          Navigator.of(context).push(MaterialPageRoute(builder: (ctx) {
            return MyHomePage(
              title: "새로운 페이지에요!",
            );
          }));
        }));
  }
}

1. 정리
   1. 괄호 찾다 시간 다 간다......
   2. Stack(LIFO: Last-IN First-OUT)으로 화면을 쌓는 구조에 대해 생각해보니 안드로이드가 항상 이런 식이었지.

#패스트캠퍼스 #패캠챌린지 #수강료0원챌린지
#직장인인강 #직장인자기계발 #패캠인강후기 #패스트캠퍼스후기
#환급챌린지 #오공완 #누적다운로드120만1인개발자와함께하는앱개발입문Online
http://bit.ly/3Y34pE0

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.