Xây dựng ứng dụng Flutter tính chỉ số BMI

Hãy bắt đầu viết ứng dụng Flutter đầu tiên bằng phần hướng dẫn xây dựng ứng dụng Flutter tính chỉ số BMI (Calculate Your BMI) tại Team Việt Dev.

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 giúp bạn dễ dàng xây dựng các ứng dụng với giao diện thiết kế đẹp mang phong cách Material Design.

Flutter được viết bằng Dart. Dart là ngôn ngữ lập trình hướng đối tượng, giống như Java, C #, JavaScript hoặc bất kỳ ngôn ngữ OOP nào khác thì mã hóa trong Dart cũng tương tự.

Để tìm hiểu về Flutter chúng ta sẽ thử nghiệm xây dựng ứng dụng đơn giản tính chỉ số BMI. Ứng dụng tính chỉ số BMI sẽ đánh giá mức độ gầy hay béo của một người.

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.

Sau đó chọn mục Flutter application làm loại dự án và nhấn Next.

Nhập tên dự án chẳng hạn bmi và nhấn Next để qua bước kế tiếp.

Tiếp theo bạn khai báo thêm thông tin Company domain và Package name rồi nhấn Finish để hoàn thành khởi tạo chương trình Flutter đầu tiên.

Bước 2: Bây giờ chúng ta sẽ thiết kế giao diện người dùng với 2 trường để nhập dữ liệu chiều cao và cân nặng, cùng với 1 nút tính kết quả chỉ số BMI. 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(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Calculate Your BMI',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  int myHeight = 0;
  int myWeight = 0;

  @override
  Widget build(BuildContext context) {

    TextField billAmountField = new TextField(
        decoration: new InputDecoration(
            labelText: "Height (cm)", hintText: "Enter your height..."),
        keyboardType: TextInputType.number,
        onChanged: (String value) {
          try {
            myHeight = int.parse(value.toString());
          } catch (exception) {
            myHeight = 0;
          }
        });

    TextField gstPercentageField = new TextField(
        decoration: new InputDecoration(
            labelText: "Weight (kg)", hintText: "Enter your weight..."),
        keyboardType: TextInputType.number,
        onChanged: (String value) {
          try {
            myWeight = int.parse(value.toString());
          } catch (exception) {
            myWeight = 0;
          }
        });

    RaisedButton calculateButton = new RaisedButton(
        child: new Text("Calculate"),
        onPressed: () {
          double h = (myHeight / 100);
          double total = myWeight / (h * h);
          String result = total.toStringAsFixed(2);

          String msg = "";

          if (total < 18.5) {
            msg = "Underweight";
          } else {
            if (total >= 18.5 && total <= 24.9) {
              msg = "Normal weight";
            } else {
              if (total >= 25 && total <= 29.9) {
                msg = "Overweight";
              } else {
                msg = "Obesity";
              }
            }
          }

          AlertDialog dialog = new AlertDialog(
              content: new Text("BMI: $result \n" "Result: $msg"));

          showDialog(context: context, child: dialog);
        });

    Container container = new Container(
        padding: const EdgeInsets.all(16.0),
        child: new Column(
            children: [billAmountField, gstPercentageField, calculateButton]));
    AppBar appBar = new AppBar(title: new Text("Calculate Your BMI"));
    Scaffold scaffold = new Scaffold(appBar: appBar, body: container);
    return scaffold;
  }
}

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.

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)