[8] Flutter 실습

import 'package:flutter/material.dart';
class ExCu extends StatelessWidget {
  const ExCu({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          '더보기',
          style: TextStyle(
            color: Colors.black.withOpacity(0.6),
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: Colors.white,
        // leading: Icon(Icons.menu),
        actions: [
          Padding(
            padding: const EdgeInsets.all(20),
            child: Icon(Icons.settings, color: Colors.black),
          ),
        ],
        foregroundColor: Colors.white,
      ),
      body: Column(
        children: [
          Container(
            width: double.infinity,
            height: 80,
            margin: EdgeInsets.all(8),
            padding: EdgeInsets.all(24),
            decoration: BoxDecoration(
              color: Colors.grey[300],
              borderRadius: BorderRadius.circular(14),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Text(
                  '채*민님',
                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                ),
                Row(
                  children: [
                    Text(
                      'Friend',
                      style: TextStyle(
                        color: Colors.purple,
                        fontSize: 16,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    Text('155p', style: TextStyle(fontWeight: FontWeight.bold)),
                  ],
                ),
              ],
            ),
          ),
          // 두 번째 Container 배치
          Container(
            width: double.infinity,
            height: 50,
            margin: EdgeInsets.all(8),
            // color: Colors.green
            alignment: Alignment.bottomLeft,
            child: Text(
              '서비스',
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
            ),
          ),
          // 세번째 Container 배치
          Container(
            padding: EdgeInsets.all(24),
            child: Row(
              children: [
                // 첫번째 아이콘
                Column(
                  children: [
                    Stack(
                      children: [
                        Icon(Icons.copyright, size: 50),
                        Positioned(
                            bottom: 3,
                            right: 3,
                            child: Container(
                              alignment: Alignment.center,
                              width: 15,
                              height: 15,
                              decoration: BoxDecoration(
                                color: Colors.pinkAccent,
                                borderRadius: BorderRadius.circular(3),
                              ),
                              child: Text('N',style: TextStyle(color: Colors.white),),
                            ),
                        ),
                      ],
                    ),
                    Text('포인트 충전소'),
                  ],
                ),
                SizedBox(width: 20,),
                // 두번째 아이콘
                Column(
                  children: [
                    Stack(
                      children: [
                        Icon(Icons.chat, size: 50),
                        Positioned(
                          bottom: 3,
                          right: 3,
                          child: Container(
                            alignment: Alignment.center,
                            width: 15,
                            height: 15,
                            decoration: BoxDecoration(
                              color: Colors.pinkAccent,
                              borderRadius: BorderRadius.circular(3),
                            ),
                            child: Text('N',style: TextStyle(color: Colors.white),),
                          ),
                        ),
                      ],
                    ),
                    Text('상담하기'),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

stateful(stf)

state란?

• Widget이 build 될 때 동기적으로 읽을 수 있는 정보
• Widget의 생명주기가 끝나기 전까지 변경 될 수 있는 정보

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

  @override
  State<> createState() => _State();
}

class _State extends State<> {
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

build

• build 메소드는 화면을 설계하기 위해서 확정되어 있는 내용들만 사용할 수 있다!
• 즉, 변수는 값이 바뀌므로 사용할 수 없다! => 문제점 완화! set state()
• set state() : 상태가 바뀌거나 변수의 데이터가 바뀜을 감지할 수 있는 메소드
• => 값이 바뀌면 바뀐 내용을 활용하여 build 메소드에게 화면 재구성을 자동적으로 요청 할 수 있다!