본문 바로가기
언어 공부/Flutter

[Flutter] FlatButton & setState & onPressed

by 안다니. 2020. 8. 10.
반응형

FlatButton & setState & onPressed

 

 

프로그래밍은 힘든 과정을 버티는 것 같습니다.. 오늘은 버튼을 사용해서 개발을 했습니다.

 

먼저 버튼의 상태를 변경시켜야 하기 때문에 StatefulWidget으로 사용을 했으며

Button은 항상 onPressed가 따라 옵니다 그 이유는, 버튼을 눌렀을 때 어떠한 행동을 할 것인지 알아야 되기 때문입니다.

그리고 setState로 상태를 변경 시켜줍니다. 

 

아래의 소스코드는 이미지 5개 파일들을, 버튼이 눌렸을 때 랜덤으로 화면에 출력해주는 소스코드입니다.

 

반응형
import 'package:flutter/material.dart';
import 'dart:math';


void main() {
  return runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        appBar: AppBar(
          title: Text('Ask Me Anything'),
          backgroundColor: Colors.blue.shade900,
        ),
        body: MagicBall(),
      ),
    ),
  );
}

class MagicBall extends StatefulWidget {
  @override
  _MagicBallState createState() => _MagicBallState();
}

class _MagicBallState extends State<MagicBall> {
  int temp = 1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        children: <Widget>[
          Expanded(
            child: FlatButton(
              onPressed: (){
                setState(() {
                  temp = Random().nextInt(5) + 1;
                });
                print("$temp");
              },
                child: Image.asset('images/ball$temp.png')
            ),
          )
        ],
      ),
      
    );
  }
}

 

짧은 Flutter 프로그래밍 소스입니다. 감사합니다.

 

 

반응형

댓글