[Flutter] Stateful Widget 닌자카드 만들기

어플 만들기가 자꾸 땡겨서....

플러터 영상을 열심히 보고 있다 

오늘 만든 간단한 닌자 카드인데 floatingActionButton 을 두 개 더 추가해서 감소와 리셋 기능까지 넣었다!

flutter 공부하고 싶은 사람들은 아래 유투버에게 받아보세요~! 

아마 영국 사람인 것 같아요!

반응형

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    home: NinjaCard(),
  ));
}

class NinjaCard extends StatefulWidget {
  @override
  State<NinjaCard> createState() => _NinjaCardState();
}

class _NinjaCardState extends State<NinjaCard> {
  int ninjaLevel = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[900],
      appBar: AppBar(
        title: const Text('Ninja ID Card'),
        centerTitle: true,
        backgroundColor: Colors.grey[850],
        elevation: 0.0,
      ),
      floatingActionButton: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: [
          FloatingActionButton(
            onPressed: () {
              setState(() {
                ninjaLevel = 0;
              });
            },
            backgroundColor: Colors.grey[800],
            child: const Icon(Icons.refresh),
          ),
          const SizedBox(
            width: 10.0,
          ),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                if (ninjaLevel > 0) {
                  ninjaLevel--;
                }
              });
            },
            backgroundColor: Colors.grey[800],
            child: const Icon(Icons.remove),
          ),
          const SizedBox(
            width: 10.0,
          ),
          FloatingActionButton(
            onPressed: () {
              setState(() {
                ninjaLevel++;
              });
            },
            backgroundColor: Colors.grey[800],
            child: const Icon(Icons.add),
          ),
        ],
      ),
      body: Padding(
        padding: const EdgeInsets.fromLTRB(30.0, 40.0, 40.0, 0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            const Center(
              child: CircleAvatar(
                backgroundImage: AssetImage('assets/ninja.png'),
                radius: 60.0,
              ),
            ),
            const Divider(
              height: 60.0,
              color: Color.fromARGB(255, 183, 181, 181),
            ),
            const Text('NAME',
                style: TextStyle(
                  color: Colors.grey,
                  letterSpacing: 2.0,
                )),
            const SizedBox(
              height: 10.0,
            ),
            const Text('Jin-Kim',
                style: TextStyle(
                  color: Colors.amberAccent,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold,
                )),
            const SizedBox(
              height: 30.0,
            ),
            const Text('Current Ninja Level',
                style: TextStyle(
                  color: Colors.grey,
                  letterSpacing: 2.0,
                )),
            const SizedBox(
              height: 10.0,
            ),
            Text('$ninjaLevel',
                style: const TextStyle(
                  color: Colors.amberAccent,
                  letterSpacing: 2.0,
                  fontSize: 28.0,
                  fontWeight: FontWeight.bold,
                )),
            const SizedBox(height: 30.0),
            Row(
              children: const <Widget>[
                Icon(
                  Icons.email,
                  color: Color.fromARGB(255, 176, 175, 175),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Text('jin.kim@ninjaworld.co.kr',
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 18.0,
                      letterSpacing: 1.0,
                    )),
              ],
            )
          ],
        ),
      ),
    );
  }
}

 

데이터가 변할 때 사용하는 setState() 기능을 다시 상기시킬 수 있는 연습이었다!

또한 이미지는 pubsec 파일에 입력해야는 것!