간단한 계산기(더하기 기능) 만들기 예제
1. Flutter 프로젝트 생성하기(cmd)
flutter 설치 및 환경변수 설치는 아래 참고
https://tiny-immj.tistory.com/74
2.Flutter 개발 환경 설정_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발
개발환경 선택플러터 개발을 할 때는 대상 웹과 동일한 플랫폼에서 해야 합니다즉 Mac OS용으로 개발하기 위해선 Mac이 필요하고 Windows 타깃으로 개발을 하기 위해선 Windows PC가 필요합니다 저는
tiny-immj.tistory.com
1) 명령 프롬프트(cmd)를 실행
2) 프로젝트를 생성할 경로로 이동
D:
cd dev\flutterProject
3) 명령어로 Flutter 프로젝트 생성
flutter create flutter_web_calculator
2. 웹 개발 환경설정 확인
1) Flutter 웹 환경 활성화 확인 : 웹에서 실행을 위해 필요함
VS Code를 오픈해 flutter 웹 타겟 활성화 명령어 실행
flutter config --enable-web▷ 결과 : Setting "enable-web" value to "true".
웹에서 실행 가능하다고 나온다
2) pubspec.yaml에 웹타겟을 위한 별도의 tartgets 항목을 추가할 필요는 없다
웹 지원을 활성화하면 Flutter가 자동으로 웹타겟을 처리한다
3) Bootstrap 추가하기
> web/index.html 파일에 Bootstrap을 CDN으로 추가해 사용할 수 있다
☞ <head 태그 안에 Bootstrap CSS 추가한다>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" >
3. 계산기 기능 구현과 UI 구성하기
> main.dart 수정
▷UI : 텍스트 박스 2개, 버튼 1개로 구성
▷기능 구현 : 입력된 숫자 2개를 더하거나 경고 메시지를 출력하도록 기능 구현
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Flutter Web Calculator')),
body: CalculatorScreen(),
),
);
}
}
class CalculatorScreen extends StatefulWidget {
@override
_CalculatorScreenState createState() => _CalculatorScreenState();
}
class _CalculatorScreenState extends State<CalculatorScreen> {
final TextEditingController _controller1 = TextEditingController();
final TextEditingController _controller2 = TextEditingController();
final FocusNode _focusNode1 = FocusNode();
final FocusNode _focusNode2 = FocusNode();
void _calculateSum() {
String value1 = _controller1.text;
String value2 = _controller2.text;
if (value1.isEmpty || value2.isEmpty) {
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text("Error"),
content: Text("숫자를 입력하세요!"),
actions: [
TextButton(
onPressed: () {
Navigator.pop(context);
if (value1.isEmpty) {
FocusScope.of(context).requestFocus(_focusNode1);
} else {
FocusScope.of(context).requestFocus(_focusNode2);
}
},
child: Text("확인"),
),
],
),
);
} else {
int num1 = int.tryParse(value1) ?? 0;
int num2 = int.tryParse(value2) ?? 0;
int sum = num1 + num2;
showDialog(
context: context,
builder: (_) => AlertDialog(
title: Text("결과"),
content: Text("두 값의 합은 $sum 입니다."),
actions: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text("확인"),
),
],
),
);
}
}
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _controller1,
focusNode: _focusNode1,
decoration: InputDecoration(
labelText: '첫 번째 숫자',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
),
SizedBox(height: 16),
TextField(
controller: _controller2,
focusNode: _focusNode2,
decoration: InputDecoration(
labelText: '두 번째 숫자',
border: OutlineInputBorder(),
),
keyboardType: TextInputType.number,
),
SizedBox(height: 16),
ElevatedButton(
onPressed: _calculateSum,
child: Text("더하기"),
),
],
),
);
}
}
4. 실행 화면
1) 크롬에서 실행하기
flutter run -d chrome
2) 기능 테스트
깃허브 업로드 완료!
'프로젝트 기록 > Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발' 카테고리의 다른 글
| flutter 웹 개발 index.html과 main.dart, 실행 순서에 대한 이해 (2) | 2024.11.15 |
|---|---|
| Hello World 출력하는 웹사이트 만들기, Entrypoint, 위젯트리_Flutter와 Bootstrap을 활용한 크로스 플랫폼 웹 개발 (3) | 2024.11.13 |
| 7. Bootstrap 폼 디자인, flutter dart 에러 해결 _Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 (4) | 2024.11.08 |
| 6. Bootstrap으로 UI 구성하기_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 (4) | 2024.10.21 |
| 5.Dart 언어 기초1_Flutter, Bootstrap을 활용한 크로스 플랫폼 웹 개발 (2) | 2024.09.11 |
