Flutter merupakan SDK yang bersifat open-source, yang digunakan untuk membangun UI yang terlihat bagus. Dalam artikel ini, kita akan membangun kalkulator yang dapat memproses artimetika dasar berdasarkan input dari pengguna. Membuat aplikasi seperti ini dapat membantu anda memahami dasar-dasar dari Flutter dan Dart. Konsep-konsep yang dibahas adalah:
- Menampilkan widget
- Gridview.builder
- Penulisan fungsi
- If dan else dalam Dart
Ikuti langkah-langkah di bawah ini untuk menerapkan kalkulator sederhana. Mari kita mulai.
Langkah 1: Membuat Aplikasi Flutter
Buka Terminal / Command-Prompt. Ubah Direktori ke pilihan Anda dan jalankan flutter create calculatorApp. Buka aplikasi kalkulator di VS Code atau Android Studio.
Langkah 2: Aplikasi Kalkulator Pengkodean
Di folder Lib, sudah ada file main.dart. Dan sekarang di folder yang sama buat file baru bernama keys.dart. Dimulai dengan file main.dart. Buat kelas MyApp dan buat StatelessWidget. Tambahkan array tombol yang akan ditampilkan. Atur warna background-color, text-color, functionality onTapped to the buttons. Tulis fungsi untuk menghitung Jawaban.
import 'package:flutter/material.dart';
import 'buttons.dart';
import 'package:math_expressions/math_expressions.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: HomePage(),
); // MaterialApp
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
var userInput = '';
var answer = '';
// Array of button
final List<String> buttons = [
'C',
'+/-',
'%',
'DEL',
'7',
'8',
'9',
'/',
'4',
'5',
'6',
'x',
'1',
'2',
'3',
'-',
'0',
'.',
'=',
'+',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
title: new Text("Calculator"),
), //AppBar
backgroundColor: Colors.white38,
body: Column(
children: <Widget>[
Expanded(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
padding: EdgeInsets.all(20),
alignment: Alignment.centerRight,
child: Text(
userInput,
style: TextStyle(fontSize: 18, color: Colors.white),
),
),
Container(
padding: EdgeInsets.all(15),
alignment: Alignment.centerRight,
child: Text(
answer,
style: TextStyle(
fontSize: 30,
color: Colors.white,
fontWeight: FontWeight.bold),
),
)
]),
),
),
Expanded(
flex: 3,
child: Container(
child: GridView.builder(
itemCount: buttons.length,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4),
itemBuilder: (BuildContext context, int index) {
// Clear Button
if (index == 0) {
return MyButton(
buttontapped: () {
setState(() {
userInput = '';
answer = '0';
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// +/- button
else if (index == 1) {
return MyButton(
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// % Button
else if (index == 2) {
return MyButton(
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Delete Button
else if (index == 3) {
return MyButton(
buttontapped: () {
setState(() {
userInput =
userInput.substring(0, userInput.length - 1);
});
},
buttonText: buttons[index],
color: Colors.blue[50],
textColor: Colors.black,
);
}
// Equal_to Button
else if (index == 18) {
return MyButton(
buttontapped: () {
setState(() {
equalPressed();
});
},
buttonText: buttons[index],
color: Colors.orange[700],
textColor: Colors.white,
);
}
// other buttons
else {
return MyButton(
buttontapped: () {
setState(() {
userInput += buttons[index];
});
},
buttonText: buttons[index],
color: isOperator(buttons[index])
? Colors.blueAccent
: Colors.white,
textColor: isOperator(buttons[index])
? Colors.white
: Colors.black,
);
}
}), // GridView.builder
),
),
],
),
);
}
bool isOperator(String x) {
if (x == '/' || x == 'x' || x == '-' || x == '+' || x == '=') {
return true;
}
return false;
}
// function to calculate the input operation
void equalPressed() {
String finaluserinput = userInput;
finaluserinput = userInput.replaceAll('x', '*');
Parser p = Parser();
Expression exp = p.parse(finaluserinput);
ContextModel cm = ContextModel();
double eval = exp.evaluate(EvaluationType.REAL, cm);
answer = eval.toString();
}
}Dalam file Flutter main.dart adalah dimana dimulainya menjalankan kode. Di dalam main.dart pertama – tama material design package sudah di import, tambahan untuk math_expression dan file button.dart. Kemudian fungsi runApp telah dibuat dengan parameter sebagai MyApp. Setelah deklarasi class MyApp yang merupkan widget stateless, status calss MyApp telah ditata.
Langkah 3: Membangun tombol.dart
Di button.dart yang sudah diimport ke file main.dart kita mendeklarasikan variabel yang akan digunakan di seluruh program menggunakan konstruktor. Warna, warna teks, teks tombol, dan fungsi tombol yang diketuk akan diimplementasikan dalam file main.dart.
import 'package:flutter/material.dart';
// creating Stateless Widget for buttons
class MyButton extends StatelessWidget {
// declaring variables
final color;
final textColor;
final String buttonText;
final buttontapped;
//Constructor
MyButton({this.color, this.textColor, this.buttonText, this.buttontapped});
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: buttontapped,
child: Padding(
padding: const EdgeInsets.all(0.2),
child: ClipRRect(
// borderRadius: BorderRadius.circular(25),
child: Container(
color: color,
child: Center(
child: Text(
buttonText,
style: TextStyle(
color: textColor,
fontSize: 25,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
);
}
}
Langkah ke 4:
Untuk mempermudah proses, kita akan menggunakan math_expressions:^2.0.0
