Flutter Week 4 app: week4_bmi

1. เปิด android studio ทำการ new flutter project ตั้งชื่อ week4_bmi

2. เปิด AVD Manager ขึ้นมาแล้ว run emulator เพื่อจำลองมือถือ android

3. แก้ไขโค้ดหน้า main.dart ตรง appBar ให้แก้ดังนี

      appBar: AppBar(
        title: Center(child:Text('BMI'))

      ),

4. แก้ไขโค้ดในหน้า main.dart ทั้งหมดโดยลบสิ่งที่ไม่จำเป็นออก (จะรวมโค้ดข้อที่ 3 แล้ว)

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: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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


  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Center(child:Text('BMI'))

      ),
      body: Center(

        

      ),

    );
  }
}

5. แก้ไขส่วนของ body หน้า main.dart อีกรอบเพื่อสร้าง textfiled และปุ่มกด

      body: Center(
        child: Column(
          children: <Widget>[
            TextField(),
            TextField(),
            RaisedButton(
                onPressed: (){},
                child: Text('คำนวน'),
            ),
          ],
        ),
      ),

6. แก้ไขส่วนของ body ใน main.dart อีกรอบตามนี้ โดยที่ใช้ ListTile มาครอบ TextField

 body: Center(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.height),
              title:  TextField(
                maxLength: 3,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: 'ระบุส่วนสูง (cm)'
                ),
              ),
            ),
           ListTile(
             leading: Icon(Icons.add_chart),
             title: TextField(
               maxLength: 3,
               keyboardType: TextInputType.number,
               decoration: InputDecoration(
                   hintText: 'ระบุน้ำหนัก (kg)'
               ),
             ),
           ),
            
            RaisedButton(
                onPressed: (){},
                child: Text('คำนวน'),
            ),
          ],
        ),
      ),

7. สร้างตัวแปรแบบ Controller ให้ TextField ทั้งค่า Hight และค่า Width ดังรูป

  TextEditingController txtHight=TextEditingController();
  TextEditingController txtWidth=TextEditingController();

8. ให้กลับไปที่ TextField กำหนด Controller ดังภาพ

controller: txtHight,

controller: txtWidth,

9. โค้ดทั้งหมดของ main.dart ก่อนที่จะทำฟั่งชั่นคำนวนตัวเลข

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: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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


  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController txtHight=TextEditingController();
  TextEditingController txtWidth=TextEditingController();
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Center(child:Text('BMI'))

      ),
      body: Center(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.height),
              title:  TextField(
                controller: txtHight,
                maxLength: 3,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: 'ระบุส่วนสูง (cm)'
                ),
              ),
            ),
           ListTile(
             leading: Icon(Icons.add_chart),
             title: TextField(
               controller: txtWidth,
               maxLength: 3,
               keyboardType: TextInputType.number,
               decoration: InputDecoration(
                   hintText: 'ระบุน้ำหนัก (kg)'
               ),
             ),
           ),

            RaisedButton(
                onPressed: (){
                  print('ส่วนสูง:'+txtHight.text+', น้ำหนัก :'+txtWidth.text);
                },
                child: Text('คำนวน'),
            ),
          ],
        ),
      ),

    );
  }
}

10. แก้ไขปุ่มกด RaisedButton ใน onPressed เพิ่มฟังชัน setState เพื่อทำการคำนวน

 RaisedButton(
                onPressed: (){
                  //print('ส่วนสูง:'+txtHight.text+', น้ำหนัก :'+txtWidth.text);
                  setState(() {
                     //Body Mass Index (BMI) มีสูตรการคำนวณ = น้ำหนักตัว[Kg] / (ส่วนสูง[m] ยกกำลังสอง)
                    var _heightM=double.parse(txtHight.text)/100;//ประกาศตัวแปร _heightM มารับค่าส่วนสูง cm แปลงเป็น m
                    var _bmi=double.parse(txtWidth.text)/(_heightM*_heightM);
                    print(_bmi);
                  });

                },

11. สร้างตัวแปร String _result ในส่วนของ extend state

String _result="ผล BMI";

12. โค้ดทั้งหมดของ BMI โดยเพิ่ม DaiLog ด้วย (copy ทั้งหมดแปะทับเลย จะเป็น code สมบูรณ์)

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: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,

        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

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


  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController txtHight=TextEditingController();
  TextEditingController txtWidth=TextEditingController();
  String _result="0";
  int _counter = 0;

  void _incrementCounter() {
    setState(() {

      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Center(child:Text('BMI'))

      ),
      body: Center(
        child: Column(
          children: <Widget>[
            ListTile(
              leading: Icon(Icons.height),
              title:  TextField(
                controller: txtHight,
                maxLength: 3,
                keyboardType: TextInputType.number,
                decoration: InputDecoration(
                    hintText: 'ระบุส่วนสูง (cm)'
                ),
              ),
            ),
           ListTile(
             leading: Icon(Icons.add_chart),
             title: TextField(
               controller: txtWidth,
               maxLength: 3,
               keyboardType: TextInputType.number,
               decoration: InputDecoration(
                   hintText: 'ระบุน้ำหนัก (kg)'
               ),
             ),
           ),
           Text('ผล BMI = $_result'),
            RaisedButton(
                onPressed: (){
                  //print('ส่วนสูง:'+txtHight.text+', น้ำหนัก :'+txtWidth.text);
                  setState(() {
                     //Body Mass Index (BMI) มีสูตรการคำนวณ = น้ำหนักตัว[Kg] / (ส่วนสูง[m] ยกกำลังสอง)
                    var _heightM=double.parse(txtHight.text)/100;//ประกาศตัวแปร _heightM มารับค่าส่วนสูง cm แปลงเป็น m
                    var _bmi=double.parse(txtWidth.text)/(_heightM*_heightM);
                    _result=_bmi.toStringAsFixed(3);
                    if(_bmi>=30){
                      _result="อ้วนมาก";
                    }
                    else if(_bmi>=25){
                      _result="อ้วน";
                    }
                    else if(_bmi>=23){
                      _result="น้ำหนักเกิน";
                    }
                    else if(_bmi>=18.6){
                      _result="น้ำหนักปกติ เหมาะสม";
                    }
                    else
                      {
                        _result="ผอม";
                      }
                    //print(_bmi);

                    //สร้าง popup แสดงผลลัพธ์
                    showDialog(
                        context: context,
                      builder: (BuildContext context){
                       // return Text('$_result');
                        //เรียก dialog ที่เป็น widget ของ Scaffold จะทำให้สวยงาม
                        return AlertDialog(
                          title: Text('ผล BMI'),
                          content: Container(
                            width:300,
                            height:100,
                            child: Column(
                              children: <Widget>[
                                //Text('มีค่า BMI=$_bmi'),
                                Text('มีค่า BMI=${_bmi.toStringAsFixed(3)}'),
                                Text('$_result'),
                              ],
                            ),
                          ),
                          actions: <Widget>[
                            FlatButton(
                                onPressed: (){
                                  Navigator.pop(context);
                                },
                                child: Text('ปิด')
                            )
                          ],
                        );
                      }
                    );

                  });

                },
                child: Text('คำนวน'),
            ),
          ],
        ),
      ),

    );
  }
}