Flutter 모바일 앱 개발 프레임워크가 점점 더 대중화됨에 따라 많은 기업에서 프로젝트에 이 프레임워크를 사용하기로 선택하고 있습니다.
많은 개발자는 위젯의 간단한 구조를 사용하여 픽셀 완벽한 UI로 앱을 개발할 수 있는 능력을 높이 평가합니다. Flutter는 UI 개발이 간단하고 Dart 프로그래밍 언어를 사용하여 기능 로직을 강화할 수 있는 능력 때문에 모바일 앱 개발의 미래라고 생각합니다.
이 튜토리얼은 주로 간단한 팁 계산기 앱을 빌드하여 Flutter 프레임워크의 기본 사항을 가르치는 데 중점을 둡니다. Stateful 및 Stateless 위젯 클래스와 Flutter 앱 개발 중에 가장 많이 사용하게 될 일부 위젯을 포함한 표준 코딩 패턴을 다룰 것입니다.
여기서 아이디어는 스타터 Flutter 프로젝트를 설정하는 것으로 시작하는 것입니다. 그런 다음 전체 UI 및 기본 기능 구현으로 넘어갑니다.
자, 시작하겠습니다!
Flutter 프로젝트 설정 방법
새 Flutter 프로젝트를 생성하려면 시스템에 Flutter SDK가 설치되어 있어야 합니다. 간단하고 빠른 설치 과정을 위해 공식 flutter 문서를 따를 수 있습니다.
Android 플랫폼용 앱을 개발하는 경우 Android Studio 및 Android SDK도 필요합니다.
설명서에 따라 모든 것이 성공적으로 설정되면 터미널에서 다음 Flutter 명령을 실행할 수 있습니다.
flutter create tipCalculator
이 명령은 자동으로 시작 Flutter 프로젝트를 다운로드하고 설정합니다. 이제 Visual Studio Code IDE에서 프로젝트를 열 수 있습니다.
장치 시뮬레이터 또는 실제 스마트폰 장치가 연결된 경우 다음 명령을 실행하여 앱을 실행할 수 있습니다.
flutter run
또는 키보드에서 'F5'를 눌러 VSCode에서 메뉴 옵션을 트리거할 수 있습니다. 해당 메뉴에서 앱을 실행하려는 기기를 선택할 수 있습니다.
확장자가 .dart인 파일 안에 있어야 합니다. 이 명령을 성공적으로 실행하려면.
위 명령 또는 F5를 사용하여 빌드 및 실행 에뮬레이터/실제 장치에서 다음 스타터 템플릿을 얻으려면:
이제 Flutter 앱을 실행해야 합니다.
메인 프로젝트 파일인 main.dart에서 무슨 일이 일어나고 있는지 좀 더 자세히 살펴보겠습니다. .
main.dart에서 파일에는 두 개의 클래스 개체가 있습니다. 하나는 Stateful 위젯으로 확장되고 다른 하나는 Stateless 위젯으로 확장됩니다. 그게 무슨 뜻인가요?
- 상태 저장 위젯:앱의 상태를 보관하는 클래스입니다. 상태는 이 상태 저장 위젯 클래스에서 위젯의 렌더링을 변경하고 트리거할 수 있습니다. 동적 상태 변화에 기여합니다.
- 상태 비저장 위젯:이 클래스에는 상태가 없습니다. 변경되지 않는 위젯 보기를 나타냅니다. 동적 상태 변경에 기여하지 않습니다.
main.dart 파일에는 main()도 있습니다. MyApp을 호출하는 함수 runApp 내부의 클래스 기기에서 Flutter 앱 실행을 트리거하기 위한 방법입니다.
팁 계산기의 UI를 구축하는 방법
UI 구현을 시작하려면 MyHomePageState 내부에 있는 모든 것을 지워야 합니다. 기본적으로 클래스입니다.
지우고 나면 간단한 Scaffold를 반환합니다. 빌드 함수 내부에서 위젯.
Scaffold 위젯은 appBar을 추가하는 속성을 제공합니다. body 뿐만 아니라 . 지금은 간단한 앱 바를 추가할 것입니다. 아래 코드 스니펫에서 전체 구현을 볼 수 있습니다.
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
),
body: Container()
);
}
}
appBar 추가 후 빌드 및 실행 AppBar 사용 title 위젯 재산. 에뮬레이터 화면에 다음과 같은 결과가 표시됩니다.
Flutter에는 핫 리로딩 기능이 있습니다. Dart 파일을 저장하는 동안. 따라서 프로젝트의 Dart 파일에 변경 사항을 저장할 때마다 변경 사항이 에뮬레이터에 자동으로 반영됩니다.
1단계:앱 바 디자인
여기서 AppBar을 수정하겠습니다. 위젯이 제공하는 다양한 속성을 사용합니다. 아래 스니펫에서 수정된 코드를 볼 수 있습니다.
appBar: AppBar(
title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.white70,
),
빌드하고 실행하면 에뮬레이터 화면에 다음과 같은 결과가 표시됩니다.
여기에서는 기본 AppBar 중 일부를 사용했습니다.
elevation, Z-색인과 유사한 앱 바의 그림자 효과를 제어할 수 있는centerTitle제목을 중앙 집중화하려면- 배경색도 흰색으로 변경했습니다.
2단계:비계 본체 설계
지금까지 빈 Container만 있었습니다. body의 위젯 재산. 이제 일부 속성과 하위 위젯을 Container 아래 코드 스니펫의 지시대로 위젯:
body: Container(
color: Colors.white70,
padding: const EdgeInsets.all(16.0),
child: Center(
child: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
],
),
),
),
빌드하고 실행하면 에뮬레이터 화면에 다음과 같은 결과가 표시됩니다.
위 스크린샷에서 볼 수 있듯이 바디 배경색을 흰색으로 변경했습니다. 또한 일부 padding Center와 함께 위젯을 본문의 전체 UI를 중앙 집중화하는 하위 위젯으로 사용합니다.
Center 위젯에 Form가 있습니다. 위젯(자식 중 하나)은 텍스트 필드가 있는 간단한 양식을 만들 것입니다.
그리고 가장 중요한 것은 Column 위젯을 Form의 자식 위젯으로 사용 . Column 위젯은 children를 제공합니다. 화면에 수직으로 나타날 위젯을 원하는 수만큼 통합할 수 있는 위젯 배열 속성입니다.
3단계:상수 및 변수 정의
양식 요소(텍스트 필드 포함)를 구현하기 전에 입력 필드의 입력을 처리하기 위해 몇 가지 상수를 정의해야 합니다.
아래 코드 스니펫에서 필요한 상수와 변수를 볼 수 있습니다.
// This is the default bill amount
static const defaultBillAmount = 0.0;
// This is the default tip percentage
static const defaultTipPercentage = 15;
// This is the TextEditingController which is used to keep track of the change in bill amount
final _billAmountController =
TextEditingController(text: defaultBillAmount.toString());
// This is the TextEditingController which is used to keep track of the change in tip percentage
final _tipPercentageController =
TextEditingController(text: defaultTipPercentage.toString());
// This stores the latest value of bill amount calculated
double _billAmount = defaultBillAmount;
// This stores the latest value of tip percentage calculated
int _tipPercentage = defaultTipPercentage;
위의 코드 스니펫에서 TextEditingController 방법. 이 컨트롤러 메서드를 사용하면 TextFormField의 텍스트 입력을 처리할 수 있습니다. 위젯은 나중에 기본값으로 초기화됩니다.
4단계:입력 양식 필드 추가
이제 TextFormField를 사용하여 두 개의 입력 양식 필드를 추가합니다. 위젯.
이 위젯을 사용하는 동안 이전에 정의한 컨트롤러 변수로 컨트롤러 속성을 강제로 할당해야 합니다. 아래 코드 스니펫에서 위젯의 전체 코딩 구현을 볼 수 있습니다.
body: Container(
color: Colors.white70,
padding: const EdgeInsets.all(16.0),
child: Center(
child: Form(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
TextFormField(
key: Key("billAmount"),
controller: _billAmountController,
keyboardType: TextInputType.numberWithOptions(decimal: true),
decoration: InputDecoration(
hintText: 'Enter the Bill Amount',
labelText: 'Bill Amount',
labelStyle: TextStyle(
fontSize: 25,
letterSpacing: 1,
fontWeight: FontWeight.bold
),
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
),
SizedBox(height: 25,),
TextFormField(
key: Key("tipPercentage"),
controller: _tipPercentageController,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Enter the Tip Percentage',
labelText: 'Tip Percentage',
labelStyle: TextStyle(
fontSize: 25,
letterSpacing: 1,
fontWeight: FontWeight.bold
),
fillColor: Colors.white,
border: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
),
],
),
),
),
),
여기에 keyboardType을 할당했습니다. 사용자가 입력 필드를 탭할 때 필요한 키보드 유형을 표시할 수 있는 속성입니다.
InputDecoration를 사용하여 입력 필드의 스타일을 지정할 수 있는 데코레이션 속성도 있습니다. 위젯.
InputDecoration에서 위젯에는 자리 표시자 텍스트와 입력 위에 레이블을 표시하는 데 도움이 되는 여러 속성이 있습니다. border도 적용했습니다. 곡선 윤곽선 테두리를 표시하는 속성입니다.
빌드하고 실행하면 에뮬레이터 화면에 다음과 같은 결과가 표시됩니다.
5단계:이벤트 리스너 및 함수 추가
사용자가 청구 금액이나 백분율을 입력하는 즉시 팁 금액을 계산할 것이기 때문에 텍스트 입력 필드의 변경 사항을 들어야 합니다.
이를 위해 addListener을 사용하여 컨트롤러에 이벤트 리스너를 추가해야 합니다. 방법.
이제 입력 필드에 변경 사항이 발생하는 즉시 청구 금액과 팁 비율을 업데이트하는 특정 기능을 트리거하려고 합니다.
이를 위해 setState과 함께 필요한 기능을 사용할 것입니다. 일부 변경 사항이 발생하는 즉시 전체 UI를 렌더링하는 데 도움이 되는 메서드입니다.
setState메소드는build의 재실행을 트리거합니다. 방법.
아래 코드 스니펫에서 전체 코딩 구현을 볼 수 있습니다.
@override
void initState() {
super.initState();
_billAmountController.addListener(_onBillAmountChanged);
_tipPercentageController.addListener(_onTipAmountChanged);
}
_onBillAmountChanged() {
setState(() {
_billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
});
}
_onTipAmountChanged() {
setState(() {
_tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
});
}
여기에 initState가 있습니다. 방법도. 이 메서드는 앱의 이 화면에 들어가자마자 실행됩니다. 그래서 화면에 들어가자마자 이벤트 리스너를 추가합니다.
6단계:금액 섹션 추가
이제 UI 위젯으로 돌아갑니다. 열 위젯 내부의 입력 필드 바로 아래에 금액 섹션을 추가합니다.
여기에서는 SizedBox도 사용합니다. 위젯 사이에 필요한 간격을 제공할 수 있는 위젯. 아래 코드 스니펫에서 Amounts 섹션의 코딩 구현을 볼 수 있습니다.
),
SizedBox(height: 20,),
Container(
margin: EdgeInsets.all(15),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
border: Border.all(color: Colors.white),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2),
spreadRadius: 2,
blurRadius: 1,
),
],
),
child: Column(
children: [
Text("Tip Amount"),
Text("Total Amount")
],
),
),
여기에 Container가 있습니다. 몇 가지 필수 스타일 장식으로. child 속성에는 또 다른 Column이 있습니다. 두 개의 Text 위젯 세로로 배열된 위젯.
빌드하고 실행하면 에뮬레이터 화면에 다음과 같은 결과가 표시됩니다.
7단계:금액을 표시하는 별도의 상태 비저장 위젯 만들기
약간의 스타일링으로 Tip Amount와 Total Amount를 보여주고 싶기 때문입니다. 상태는 포함하지 않지만 Stateful 위젯에서 전달된 값에 따라 달라집니다.
AmountText의 전체 코딩 구현을 볼 수 있습니다. 아래 코드 스니펫의 상태 비저장 위젯 클래스:
class AmountText extends StatelessWidget {
final String text;
const AmountText(
this.text, {
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.all(8),
child: Text(text.toUpperCase(),
style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
);
}
}
여기서는 생성자 클래스를 사용하여 표시할 실제 텍스트의 값을 가져왔습니다. 이 클래스의 빌드 메서드는 Container을 반환합니다. 간단한 padding 위젯 및 Text 위젯을 자식 위젯으로.
AmountText 이후로 위젯이 준비되었으므로 이제 Stateful 위젯에서 위젯을 호출할 수 있습니다.
Column 안에 위젯을 추가하겠습니다. 이전에 간단한 Text으로 정의한 위젯 위젯. Text 위젯을 AmountText으로 교체하기만 하면 됩니다. 위젯을 만들고 필요한 텍스트 값을 전달합니다.
아래 코드 스니펫에서 코딩 구현을 볼 수 있습니다.
Container(
margin: EdgeInsets.all(15),
padding: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.all(
Radius.circular(15),
),
border: Border.all(color: Colors.white),
boxShadow: [
BoxShadow(
color: Colors.black12,
offset: Offset(2, 2),
spreadRadius: 2,
blurRadius: 1,
),
],
),
child: Column(
children: [
AmountText(
'Tip Amount: ${_getTipAmount()}',
key: Key('tipAmount'),
),
AmountText(
'Total Amount: ${_getTotalAmount()}',
key: Key('totalAmount'),
),
],
),
),
여기에서 AmountText 내부에 함수를 전달했습니다. 위젯. 이 함수는 아래 코드 스니펫에서 볼 수 있듯이 각각의 팁 금액 및 총 금액 값을 반환합니다.
_getTipAmount() => _billAmount * _tipPercentage / 100;
_getTotalAmount() => _billAmount + _getTipAmount();
마지막으로 뷰를 종료할 때 컨트롤러를 종료해야 합니다. 이를 위해 내장된 dispose을 사용해야 합니다. 기능. 이 함수는 현재 화면을 종료하는 동안 실행됩니다.
이 메서드 내에서 dispose로 컨트롤러를 호출해야 합니다. 입력 텍스트 컨트롤러를 종료하기 위한 메소드. 이렇게 하면 컨트롤러가 입력 필드의 변경 사항을 더 이상 수신하지 않게 됩니다.
아래 코드 스니펫에서 dispose 함수를 볼 수 있습니다.
@override
void dispose() {
// To make sure we are not leaking anything, dispose any used TextEditingController
// when this widget is cleared from memory.
_billAmountController.dispose();
_tipPercentageController.dispose();
super.dispose();
}
아래 데모에서 볼 수 있는 Tip Calculator 구현의 최종 결과를 얻으려면 빌드하고 실행하세요.
입력 필드의 입력을 변경함에 따라 두 금액의 값이 모두 변경됨을 알 수 있습니다.
이제 이 튜토리얼의 마지막에 이르렀습니다. Flutter 프레임워크와 Dart를 사용하여 간단한 Tip 계산기를 성공적으로 구현했습니다.
여기에서 어디로 가야 하나요?
이 튜토리얼의 주요 목표는 간단한 팁 계산기를 구축하여 Flutter 앱 개발 프레임워크의 기본 프로그래밍 패턴을 가르치는 것이었습니다.
탐색할 수 있는 더 많은 흥미로운 위젯과 추가 기능이 있습니다. 기능 구성 요소를 동일하게 유지하면서 앱의 UI를 변경할 수 있습니다.
전체적으로 Flutter는 위젯 패턴을 사용하여 복잡한 UI 디자인을 더 간단하게 만듭니다. 위젯의 자식 속성을 사용하여 위젯을 함께 쌓기만 하면 훌륭한 UI를 만들 수 있습니다.
다음 단계는 Flutter의 탐색 메커니즘을 사용하여 다른 화면으로 이동하는 것입니다. Flutter는 또한 사용자 정의 서랍 메뉴와 하단 탭의 추가를 단순화합니다.
이것은 Flutter 개발의 시작점일 뿐입니다. 눈에 보이는 것보다 더 많은 것이 있습니다. 계속 탐색하고 코딩하기만 하면 됩니다.
전체 프로젝트의 데모는 Codepen에서 사용할 수 있습니다.
이미 나와 있는 다른 사람들로부터 Flutter 앱에 대한 영감을 얻을 수 있습니다.
즐거운 코딩!