13. flutter container, state

대충 예쁘게 꾸며보았다

컨테이너에 마진을 주고 그림자 효과와

appbar를 추가하여 title로 데스매치게임을 달아주고

buttom navigation을 복붙해왔다

저 세 버튼은 onpressed만 채워주면 화면이동이 될 것같다는 느낌을 받는다

 

이제 내가 할건

데스매치에서 선택하고 싶은 위젯을 눌렀을 때 다음 매치로 넘어가는 화면을 만들 것이다.

사실 화면이 넘어 가는 것이 아니라 컨테이너 안에 있는 텍스트가 다음으로 넘어가는 것!

 

코딩애플을 보니 버튼을 눌렀을 때 재랜더링을 해주면 된다고 한다

 

데이터는 변수에 저장을 하지만

플러터에서는 자료를 잠깐 저장하고 싶을 때 변수말고 state를 사용한다고 한다

컨테이너는 그대로고 안에있는 텍스트만 계속 바꿔주는 것이기 때문에 text를 잠깐 저장해 놓기에는 변수보다 state를 사용하는것이 좋다고 한다 -> 위젯들이 자동으로 재랜더링 되기 때문

 

그래서 state를 어떻게 쓰냐?

1. StatefulWidget으로 만들기

-> 내가 저 캡쳐 화면처럼 만든 코드는 statelessWidget이다

statful하고 탭 누르면 statfulWidget을 자동으로 생성해준다

 

2. statelessWidget에서 state사용하기

statelessWifget에 마우스대고 전구 클릭  > 자동으로 fulwidget으로 바꿔줌

 

class _MyAppState extends State<MyApp> {

이 밑에다가 변수를 선언해서 클릭이벤트가 일어났을때 재랜더링을 실행하도록 한다

 

import 'package:flutter/material.dart';

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


class MyApp extends StatefulWidget{
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
  var death = ['찍먹', '민초파', '깻잎떼준다'];
  var match = ['부먹', '반민초', '냅둔다'];
  var i = 0;

클릭이벤트가 일어날때마다 i를 ++ 해주어 다음 탄으로 넘어가도록 할것이다.

0번째 텍스트는 잘 나온다

이제 클릭이벤트를 줄것이다

그리고 저 다음재생 버튼을 누르게 되면 이 질문은 절대 고를 수 없으니까 넘어가자 라는 의미의 다음 버튼이다

저 버튼을 눌러도 i를 ++ 해줄것이다

 

 

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.white,
  onPressed: () {i++; print(death[i]);print(match[i]);},
  child: Icon(Icons.skip_next, color: Color(0xff212b4b),),
),

버튼을 누르면 가끔 잘됐다가 다시 안됐다가 한다

안될 거면 끝까지 안될것이지

됐다 안됐다하는건 뭘까