Do it 플러터 앱 프로그래밍 책 공부하기

책의 내용을 정리하면서 공부하기 위해, 글을 작성한다.

---

🥳 계산기 앱을 만들어 보자!

기본적으로 버튼은 사용자가 눌렀을 때 onPressed라는 이벤트가 발생한다. 이때 어떤 기능을 수행할지 정의하는 것으로 사용자와 상호작용하는 앱을 구현할 수 있게 된다.

1. 프로젝트 만들기

Column을 이용할수 있게 StatefulWidget을 만든다.

import 'package:flutter/material.dart';

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


class MyApp extends StatelessWidget {
  static const String _title = 'Widget Example';

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

class WidgetApp extends StatefulWidget {
  // 이게 뜻하는게 뭘까?
  const WidgetApp({Key? key}) : super(key: key);

  @override
  _WidgetExampleState createState() => _WidgetExampleState();
}

class _WidgetExampleState extends State<WidgetApp> {
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Example'),
      ),
      body: Container(
        child: Center(
          child: Column(
            
            
          ),
        )
      )
    );
  }
}

2. Text,TextField,RaisedButton 위젯 추가

 child: Column(
            
            children: <Widget>[
              Text('Flutter'),
              TextField(),
              RaisedButton(onPressed: () {})
            ],
            

          ),

위의 코드를 추가하면 아래와 같은 모습이 나타내어진다.

3. Padding으로 위젯 사이의 간격을 벌려 보자.

children: <Widget>[
          Padding(padding: EdgeInsets.all(15),
                  child: Text('flutter'),
              ),

              Padding(padding: EdgeInsets.only(left: 20, right: 20),
              child: TextField(),
              ),
              Padding(
                padding: EdgeInsets.all(15),
                child: RaisedButton(onPressed: (){}),
              ),
            ],

4. 두 수를 입력받아 덧셈 후 그 결과를 출력해 보자.

4-1 TextEditingController 설정하기

• 사용자로부터 데이터 입력은 텍스트필드(TextField)를 사용하고 덧셈 후 텍스트 위젯에 출력해 보자.

• 텍스트필드를 다루려면 TextEditingController를 설정해야 한다.

• _WidgetExampleState 클래스에 TextEditingController를 선언

4-2 텍스트 필드에 controller를 선언하고 value1, value2 입력하기

class _WidgetExampleState extends State<WidgetApp> {

  String sum = '';
  TextEditingController value1 = TextEditingController();
  TextEditingController value2 = TextEditingController();

  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Widget Example'),
      ),
      body: Container(
        child: Center(
          child: Column(
            children: <Widget>[
              Padding(padding: EdgeInsets.all(15),
                    child: Text('flutter'),
              ),

              Padding(padding: EdgeInsets.only(left: 20, right: 20),
              child: TextField(
                keyboardType: TextInputType.number , controller: value1),
              ),
              Padding(
                padding: EdgeInsets.only(left:20, right: 20),
                child: TextField(
                  keyboardType: TextInputType.number, controller: value2),
              ),
            ],
          ),
        )
      )
    );
  }
}

텍스트필드에서 keyboardType에는 사용자에게 보일 키보드를 지정한다.

keyboardType: TextInputType.number을 입력하면 TextInputType이 위와 같이 number형태로 보여진다.

5. RaisedButton 꾸미기

child에 Row선언 후, children에 Icon과 Text를 입력해서 add아이콘과 Text에 더하기 라고 추가

추가되는 코드

...
child: Row(
	children:<Widget>[
    	Icon(Icons.add),
        Text('더하기')
        ],
        color: Colors.amber,
        onPressed: (){
        }
),
...

아래와 같은 결과를 나타낸다.

6. 더하기 버튼을 눌렀을 때 입력한 두 수를 덧셈 후 출력해보자.

• 계산된 결과값 sum을 Text 위젯에 표시하는 부분을 작성하자.

Padding(
	padding: EdgeInsets.all(15),
    child: Text(
    	'결과 : $sum',
        style: TextStyle(fontSize: 20),
    ),
),

7. 두 수를 더하는 코드를 작성해 보자.

• 텍스트필드에 있는 값을 가져오려면 TextEditingController.value.text 코드를 이용해야 한다.

• onPressed 이벤트 처리 부분에 작성해보자.
  `

 setState(() {
                      int result = int.parse(value1.value.text) + int.parse(value2.value.text);
                      sum = '$result';

• setState()함수는 위젯의 상태를 갱신하는 역할을 한다.
• setState()함수에서 데이터가 바뀌면 해당 데이터를 사용하는 모든 위젯에 알려준다.