Xây dựng ứng dụng Calculator bằng Flutter

Tiếp theo phần hướng dẫn xây dựng ứng dụng Flutter thì Team Việt Dev sẽ phát triển ứng dụng Calculator bằng Flutter.

Flutter là một SDK mã nguồn mở do Google phát triển, được sử dụng để tạo ra các ứng dụng dành cho thiết bị di động trên nền tảng iOS và Android. Flutter được viết bằng ngôn ngữ Dart, đây là ngôn ngữ lập trình OOP giống như Java hoặc bất kỳ ngôn ngữ OOP nào khác thì Dart cũng tương tự.

Xây dựng ứng dụng Calculator bằng Flutter

Để thực hiện xây dựng ứng dụng Calculator bằng Flutter thì yêu cầu bạn đã cài đặt Flutter và cài đặt Android Studio thành công. Bạn có thể tham khảo thêm phần hướng dẫn cài đặt Flutter trên Windows, hướng dẫn cài đặt Flutter trên Android Studio.

Bước 1: Khởi động Android Studio lên, tạo một ứng dụng Flutter đơn giản và khởi chạy với ứng dụng Flutter đầu tiên của bạn bằng cách chọn mục File > New Flutter Project. Mình sẽ đặt tên cho ứng dụng này là flutter_calculator.

Bước 2: Bây giờ chúng ta sẽ thiết kế giao diện người dùng bao gồm các số từ 0 đến 9 và các phép toán cộng trừ nhân chia. Bạn cần thay thế nội dung của tập tin lib/main.dart bằng đoạn mã sau đây:

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Calculator',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Flutter Calculator'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String output = "0";

  String _output = "0";
  double num1 = 0.0;
  double num2 = 0.0;
  String operand = "";

  buttonPressed(String buttonText) {
    if (buttonText == "CLEAR") {
      _output = "0";
      num1 = 0.0;
      num2 = 0.0;
      operand = "";
    } else if (buttonText == "+" ||
        buttonText == "-" ||
        buttonText == "/" ||
        buttonText == "x") {
      num1 = double.parse(output);

      operand = buttonText;

      _output = "0";
    } else if (buttonText == ".") {
      if (_output.contains(".")) {
        print("Already conatains a decimals");
        return;
      } else {
        _output = _output + buttonText;
      }
    } else if (buttonText == "=") {
      num2 = double.parse(output);

      if (operand  == "+") {
        _output = (num1 + num2).toString();
      }
      if (operand == "-") {
        _output = (num1 - num2).toString();
      }
      if (operand == "x") {
        _output = (num1 * num2).toString();
      }
      if (operand == "/") {
        _output = (num1 / num2).toString();
      }

      num1 = 0.0;
      num2 = 0.0;
      operand = "";
    } else {
      _output = _output + buttonText;
    }

    print(_output);

    setState(() {
      output = double.parse(_output).toStringAsFixed(2);
    });
  }

  Widget buildButton(String buttonText) {
    return new Expanded(
      child: new OutlineButton(
        padding: new EdgeInsets.all(24.0),
        child: new Text(
          buttonText,
          style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
        ),
        onPressed: () => buttonPressed(buttonText),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text(widget.title),
        ),
        body: new Container(
            child: new Column(
          children: <Widget>[
            new Container(
                alignment: Alignment.centerRight,
                padding:
                    new EdgeInsets.symmetric(vertical: 24.0, horizontal: 12.0),
                child: new Text(output,
                    style: new TextStyle(
                      fontSize: 48.0,
                      fontWeight: FontWeight.bold,
                    ))),
            new Expanded(
              child: new Divider(),
            ),
            new Column(children: [
              new Row(children: [
                buildButton("7"),
                buildButton("8"),
                buildButton("9"),
                buildButton("/")
              ]),
              new Row(children: [
                buildButton("4"),
                buildButton("5"),
                buildButton("6"),
                buildButton("x")
              ]),
              new Row(children: [
                buildButton("1"),
                buildButton("2"),
                buildButton("3"),
                buildButton("-")
              ]),
              new Row(children: [
                buildButton("."),
                buildButton("0"),
                buildButton("00"),
                buildButton("+")
              ]),
              new Row(children: [
                buildButton("CLEAR"),
                buildButton("="),
              ])
            ])
          ],
        )));
  }
}

Bước 3: Hãy bắt đầu khởi chạy ứng dụng bằng cách nhấp vào mũi tên màu xanh lá cây trong IDE. Bạn sẽ thấy đầu ra Android hoặc iOS tùy thuộc vào thiết bị của bạn.

Xây dựng ứng dụng Calculator bằng Flutter

Lời kết: Trong thời gian tới Team Việt Dev sẽ tiếp tục chia sẻ thêm nhiều bài viết về xây dựng ứng dụng di động trên Android và iOS bằng Flutter miễn phí đến bạn đọc, các bạn nhớ theo dõi kênh để có được những chia sẻ mới nhất.

(Tác giả: Team Việt Dev)

Bình luận