카테고리 없음

스나이퍼팩토리 8일차 과제3

신승호. 2023. 2. 5. 02:53
  1. 다음 조건을 확인하고, 첨부된 3가지의 이미지 화면과 같은 결과를 만드세요.
    • TextField를 두 개 사용하여 변수에 저장합니다.
    • 사칙연산이 가능하도록 버튼을 4개 만듭니다. 각각의 버튼(+,-,*,/)를 누르면 해당 연산자에 맞는 결과값을 출력합니다.
    • 이 때, 결과값은 **다이얼로그(Dialog)**로 출력합니다. Dialog란, 앱에서 팝업창처럼 화면위에 화면을 띄우는것을 말합니다. 일반적으로 showDialog가 있고, AlertDialog를 주로 사용합니다.
    • 계산 결과를 result로 넣으면, 다이얼로그를 출력하는 예시코드가 제공됩니다. 해당 코드를 활용하여 결과를 화면에 출력하세요.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  static const String_title = '사칙연산';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: String_title,
      home: MainPage(),
    );
  }
}

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

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  TextEditingController value1 = TextEditingController();
  TextEditingController value2 = TextEditingController();

  showResultDialog(BuildContext context, var result) {
    showDialog(
      context: context,
      builder: (context) {
        return Dialog(
          shape:
              RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
          child: SizedBox(
            width: MediaQuery.of(context).size.width / 2,
            height: 150,
            child: Center(
                child: Text(
              "$result",
              style: const TextStyle(fontWeight: FontWeight.bold),
            )),
          ),
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('사칙연산'),
          centerTitle: true,
        ),
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text('x의 값은?'),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 46),
                  child: SizedBox(
                    width: 200,
                    height: 60,
                    child: TextField(
                      onChanged: (value) {
                        setState(() {});
                      },
                      controller: value1,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'x값을 입력하세요',
                      ),
                    ),
                  ),
                )
              ],
            ),
            Row(
              children: [
                Padding(
                  padding: const EdgeInsets.only(left: 16),
                  child: Text('y의 값은?'),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 46),
                  child: SizedBox(
                    width: 200,
                    height: 60,
                    child: TextField(
                      onChanged: (value) {
                        setState(() {});
                      },
                      controller: value2,
                      keyboardType: TextInputType.number,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        hintText: 'y값을 입력하세요',
                      ),
                    ),
                  ),
                )
              ],
            ),
            ElevatedButton(
                onPressed: () {
                  showResultDialog(context, int.parse(value1.value.text) + int.parse(value2.value.text));
                },
                child: Text('더하기의 결과값은?!')),
            ElevatedButton(
                onPressed: () {
                  showResultDialog(context, int.parse(value1.value.text) * int.parse(value2.value.text));
                },
                child: Text('곱하기의 결과값은?!')),
            ElevatedButton(
                onPressed: () {
                  showResultDialog(context, int.parse(value1.value.text) - int.parse(value2.value.text));
                },
                child: Text('빼기의 결과값은?!')),
            ElevatedButton(
                onPressed: () {
                  showResultDialog(context, int.parse(value1.value.text) / int.parse(value2.value.text));
                },
                child: Text('나누기의 결과값은?!'))
          ],
        ),
      ),
    );
  }
}

UI실행결과
8더하기4 결과값
8곱하기4 결과값
8빼기4 결과값
8나누기4 결과값

[참고]

https://velog.io/@hoha/%ED%94%8C%EB%9F%AC%ED%84%B0-%EC%82%AC%EC%9A%A9%EC%9E%90%EC%99%80-%EC%83%81%ED%98%B8%EC%9E%91%EC%9A%A9%ED%95%98%EB%8A%94-%EC%95%B1-%EB%A7%8C%EB%93%A4%EA%B8%B0