Do it 플러터 앱 프로그래밍 책 공부하기
책의 내용을 정리하면서 공부하기 위해, 글을 작성한다.
기본적으로 버튼은 사용자가 눌렀을 때 onPressed라는 이벤트가 발생한다. 이때 어떤 기능을 수행할지 정의하는 것으로 사용자와 상호작용하는 앱을 구현할 수 있게 된다.
Column을 이용할수 있게 StatefulWidget을 만든다.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
static const String _title = 'Widget Example';
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home:WidgetApp(),
);
}
}
class WidgetApp extends StatefulWidget {
// 이게 뜻하는게 뭘까?
const WidgetApp({Key? key}) : super(key: key);
_WidgetExampleState createState() => _WidgetExampleState();
}
class _WidgetExampleState extends State<WidgetApp> {
Widget build(BuildContext context){
return Scaffold(
appBar: AppBar(
title: Text('Widget Example'),
),
body: Container(
child: Center(
child: Column(
),
)
)
);
}
}
child: Column(
children: <Widget>[
Text('Flutter'),
TextField(),
RaisedButton(onPressed: () {})
],
),
위의 코드를 추가하면 아래와 같은 모습이 나타내어진다.
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: (){}),
),
],
사용자로부터 데이터 입력은 텍스트필드(TextField)를 사용하고 덧셈 후 텍스트 위젯에 출력해 보자.
텍스트필드를 다루려면 TextEditingController를 설정해야 한다.
_WidgetExampleState 클래스에 TextEditingController를 선언
class _WidgetExampleState extends State<WidgetApp> {
String sum = '';
TextEditingController value1 = TextEditingController();
TextEditingController value2 = TextEditingController();
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형태로 보여진다.
child에 Row선언 후, children에 Icon과 Text를 입력해서 add아이콘과 Text에 더하기 라고 추가
추가되는 코드
...
child: Row(
children:<Widget>[
Icon(Icons.add),
Text('더하기')
],
color: Colors.amber,
onPressed: (){
}
),
...
아래와 같은 결과를 나타낸다.
Padding(
padding: EdgeInsets.all(15),
child: Text(
'결과 : $sum',
style: TextStyle(fontSize: 20),
),
),
텍스트필드에 있는 값을 가져오려면 TextEditingController.value.text
코드를 이용해야 한다.
onPressed 이벤트 처리 부분에 작성해보자.
`
setState(() {
int result = int.parse(value1.value.text) + int.parse(value2.value.text);
sum = '$result';