Membuat aplikasi BMI (Body Mass Index calculator) dengan flutter 3.10.3 terbaru 2023

Konten [Tampil]

Pastikan anda telah membuat Proyek Flutter




1. Struktur Folder



2. Code main,  

beri nama main.dart

import 'package:bionotes/pages/splash_screen.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';

import 'controller/home_controller.dart';

import 'pages/input_page.dart';

import 'pages/result_page.dart';



void main() {

  Get.put(HomeController());

  runApp(GetMaterialApp(

    debugShowCheckedModeBanner: false,

    initialRoute: '/',

    getPages: [

      GetPage(name: '/', page: ()=> SplashSceen()),

      GetPage(name: '/input', page: ()=> InputPage()),

      GetPage(name: '/result', page: () => ResultPage()),

    ],

  ));

}

3. Code di dalam folder Controller

beri nama home_controller.dart

import 'package:get/get.dart';


class HomeController extends GetxController {

  RxDouble weight = 0.0.obs;

  RxDouble height = 0.0.obs;

  RxDouble bmi = 0.0.obs;


  void setWeight(double value) {

    weight.value = value;

  }


  void setHeight(double value) {

    height.value = value;

  }


  void calculateBMI() {

    double heightInMeters = height.value / 100.0;

    bmi.value = weight.value / (heightInMeters * heightInMeters);

  }

}


class HomeBinding implements Bindings {

  @override

  void dependencies() {

    Get.lazyPut<HomeController>(() => HomeController());

  }

}

4.  Code di dalam folder pages : 

input_page.dart

import 'package:flutter/material.dart';

import 'package:get/get.dart';


import '../controller/home_controller.dart';


 class InputPage extends StatelessWidget {

  final HomeController controller = Get.find<HomeController>();


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('BMI Calculator'),

      ),

      body: Container(

        padding: EdgeInsets.all(16.0),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            TextField(

              keyboardType: TextInputType.number,

              decoration: InputDecoration(labelText: 'Berat (kg)'),

              onChanged: (value) => controller.setWeight(double.parse(value)),

            ),

            SizedBox(height: 16.0),

            TextField(

              keyboardType: TextInputType.number,

              decoration: InputDecoration(labelText: 'Tinggi (cm)'),

              onChanged: (value) => controller.setHeight(double.parse(value)),

            ),

            SizedBox(height: 16.0),

            ElevatedButton(

              onPressed: () {

                controller.calculateBMI();

                Get.toNamed('/result');

              },

              child: Text('Hitung BMI'),

            ),

          ],

        ),

      ),

    );

  }

}

 

result_page.dart

 import 'package:flutter/material.dart';

import 'package:get/get.dart';


import '../controller/home_controller.dart';


class ResultPage extends StatelessWidget {

  final HomeController controller = Get.find();


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Hasil BMI'),

      ),

      body: Container(

        padding: EdgeInsets.all(16.0),

        child: Column(

          mainAxisAlignment: MainAxisAlignment.center,

          children: [

            Text(

              'BMI Anda:',

              style: TextStyle(fontSize: 24.0, fontWeight: FontWeight.bold),

            ),

            SizedBox(height: 16.0),

            Obx(() => Text(

                  '${controller.bmi.value.toStringAsFixed(2)}',

                  style: TextStyle(fontSize: 48.0, fontWeight: FontWeight.bold),

                )),

          ],

        ),

      ),

    );

  }

}


 splash_screen.dart

import 'package:bionotes/pages/input_page.dart';

import 'package:flutter/material.dart';

import 'package:get/get.dart';


class SplashSceen extends StatefulWidget {

  @override

  _SplashScreenState createState() => _SplashScreenState();

}


class _SplashScreenState extends State<SplashSceen> {

  @override

  void initState() {

    super.initState();

    navigateToNextScreen();

  }


  void navigateToNextScreen() async {

    await Future.delayed(Duration(seconds: 2)); //Menunggu 2 detik

    Get.off(() =>

        InputPage()); //pindah ke input page dan menghapus splashcreen dari tumpukan navigasi

  }


  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: Center(

        child: Text("Splaschcreen")

      ),

    );

  }

}


 Link Github 

 

Previous Post Next Post