วิธีใช้ Flutter เพื่อสร้าง Tip Calculator

เนื่องจากเฟรมเวิร์กการพัฒนาแอปบนอุปกรณ์เคลื่อนที่ Flutter ได้รับความนิยมมากขึ้นเรื่อยๆ ธุรกิจจำนวนมากจึงเลือกใช้เฟรมเวิร์กนี้สำหรับโครงการของตน

นักพัฒนาหลายคนชื่นชมความสามารถในการพัฒนาแอพด้วย UI ที่สมบูรณ์แบบของพิกเซลโดยใช้โครงสร้างที่เรียบง่ายของวิดเจ็ต ฉันคิดว่า Flutter เป็นอนาคตของการพัฒนาแอพมือถือเพราะความเรียบง่ายในการพัฒนา UI และความสามารถในการขับเคลื่อนคุณสมบัติตรรกะโดยใช้ภาษาการเขียนโปรแกรม Dart

บทช่วยสอนนี้เน้นการสอนพื้นฐานของเฟรมเวิร์ก Flutter โดยการสร้างแอพ Tip Calculator อย่างง่าย เราจะครอบคลุมรูปแบบการเข้ารหัสมาตรฐานรวมถึงคลาสวิดเจ็ต Stateful และ Stateless และวิดเจ็ตบางส่วนที่คุณจะใช้บ่อยที่สุดในระหว่างการพัฒนาแอพ Flutter

แนวคิดในที่นี้คือการเริ่มต้นด้วยการตั้งโครงการ Flutter ที่เริ่มต้นขึ้น จากนั้น เราจะดำเนินการใช้ UI โดยรวมและฟังก์ชันพื้นฐาน

เริ่มกันเลย!

วิธีตั้งค่าโครงการ Flutter ของคุณ

ในการสร้างโปรเจ็กต์ Flutter ใหม่ คุณต้องติดตั้ง Flutter SDK ไว้ในระบบของคุณ สำหรับขั้นตอนการติดตั้งที่ง่ายและรวดเร็ว คุณสามารถปฏิบัติตามเอกสารทางการของ Flutter

โปรดจำไว้ว่า มันต้องใช้ Android Studio และ Android SDK ด้วย หากคุณกำลังพัฒนาแอพสำหรับแพลตฟอร์ม Android

หลังจากที่ตั้งค่าทุกอย่างเรียบร้อยแล้วตามเอกสารประกอบ คุณสามารถดำเนินการคำสั่ง Flutter ต่อไปนี้ในเทอร์มินัลได้:

flutter create tipCalculator

คำสั่งนี้จะดาวน์โหลดและตั้งค่าเริ่มต้นโครงการ Flutter ให้คุณโดยอัตโนมัติ ตอนนี้คุณสามารถเปิดโครงการใน Visual Studio Code IDE

หากคุณมีอุปกรณ์จำลองอุปกรณ์หรืออุปกรณ์สมาร์ทโฟนจริงเชื่อมต่ออยู่ คุณสามารถเรียกใช้คำสั่งต่อไปนี้เพื่อเปิดแอปได้:

flutter run

หรืออีกวิธีหนึ่ง คุณสามารถกด 'F5' บนแป้นพิมพ์ ซึ่งจะเรียกตัวเลือกเมนูใน VSCode จากเมนูนั้น คุณสามารถเลือกอุปกรณ์ที่คุณต้องการเปิดแอป

โปรดทราบว่า คุณต้องอยู่ในไฟล์ที่มีนามสกุล .dart เพื่อรันคำสั่งนี้สำเร็จ

สร้างและเรียกใช้โดยใช้คำสั่งด้านบนหรือ F5 เพื่อรับเทมเพลตเริ่มต้นต่อไปนี้ในโปรแกรมจำลอง/อุปกรณ์จริงของคุณ:

ตอนนี้คุณควรมีแอพ Flutter ทำงานแล้ว

มาดูรายละเอียดเพิ่มเติมเล็กน้อยเกี่ยวกับสิ่งที่เกิดขึ้นในไฟล์โครงการหลัก main.dart .

ใน main.dart file เรามีวัตถุสองคลาส หนึ่งขยายไปยังวิดเจ็ต Stateful และอีกส่วนหนึ่งไปยังวิดเจ็ตไร้สัญชาติ หมายความว่ายังไง?

• วิดเจ็ตสถานะ:คลาสที่เก็บสถานะของแอป สถานะสามารถเปลี่ยนและทริกเกอร์การแสดงผลของวิดเจ็ตในคลาสวิดเจ็ตแบบเก็บสถานะนี้ มีส่วนทำให้เกิดการเปลี่ยนแปลงสถานะแบบไดนามิก
• วิดเจ็ตไร้สัญชาติ:คลาสนี้ไม่มีสถานะใดๆ แสดงถึงมุมมองวิดเจ็ตที่ไม่เปลี่ยนแปลง ไม่ส่งผลต่อการเปลี่ยนแปลงสถานะแบบไดนามิก

ไฟล์ main.dart ยังมี main() ฟังก์ชันที่เรียกใช้ MyApp คลาสภายใน runApp เพื่อเรียกใช้งานแอป Flutter ในเครื่อง

วิธีสร้าง UI ของเคล็ดลับเครื่องคิดเลข

ในการเริ่มใช้งาน UI เราจำเป็นต้องล้างข้อมูลทั้งหมดที่มีอยู่ใน MyHomePageState คลาสตามค่าเริ่มต้น

หลังจากเคลียร์แล้ว เราจะคืนค่า Scaffold . แบบง่าย ๆ วิดเจ็ตจากภายในฟังก์ชันบิลด์

Scaffold วิดเจ็ตมีคุณสมบัติในการเพิ่ม appBar เช่นเดียวกับ body . สำหรับตอนนี้ เราจะเพิ่มแถบแอปอย่างง่าย คุณสามารถดูการใช้งานโดยรวมได้ในข้อมูลโค้ดด้านล่าง:

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title:Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
      ),
      body: Container()
    );
  }
}

สร้างและเรียกใช้หลังจากเพิ่ม appBar โดยใช้ AppBar วิดเจ็ตที่มี title คุณสมบัติ. คุณจะได้ผลลัพธ์ต่อไปนี้ในหน้าจออีมูเลเตอร์ของคุณ:

โปรดทราบว่า Flutter มี โหลดซ้ำ ในขณะที่บันทึกไฟล์ Dart ดังนั้น เมื่อใดก็ตามที่คุณบันทึกการเปลี่ยนแปลงใดๆ ในไฟล์ Dart ของโปรเจ็กต์ การเปลี่ยนแปลงจะมีผลในโปรแกรมจำลองโดยอัตโนมัติ

ขั้นตอนที่ 1:ออกแบบแถบแอป

ในที่นี้เราจะแก้ไข AppBar วิดเจ็ตโดยใช้คุณสมบัติต่างๆ ที่มีให้ คุณสามารถดูโค้ดที่แก้ไขได้ในตัวอย่างด้านล่าง:

appBar: AppBar(
  title: Text('Tip Calculator', style: TextStyle(color: Colors.black87),),
  centerTitle: true,
  elevation: 0.0,
  backgroundColor: Colors.white70,
),

สร้างและเรียกใช้ แล้วคุณจะได้ผลลัพธ์ต่อไปนี้ในหน้าจอโปรแกรมจำลอง:

ในที่นี้ เราได้ใช้ AppBar basic พื้นฐานบางส่วน คุณสมบัติวิดเจ็ตเช่น

• elevation ซึ่งช่วยให้เราควบคุมเอฟเฟกต์เงาในแถบแอปได้คล้ายกับดัชนี z
• centerTitle เพื่อรวมหัวเรื่อง
• และเราได้เปลี่ยนสีพื้นหลังเป็นสีขาวด้วย

ขั้นตอนที่ 2:ออกแบบโครงนั่งร้าน

จนถึงตอนนี้ เราเหลือแค่ Container . ที่ว่างเปล่า วิดเจ็ตใน body คุณสมบัติ. ตอนนี้ เรากำลังจะเพิ่มคุณสมบัติและวิดเจ็ตย่อยให้กับ Container วิดเจ็ตตามที่กำหนดไว้ในข้อมูลโค้ดด้านล่าง:

body: Container(
  color: Colors.white70,
  padding: const EdgeInsets.all(16.0),
  child: Center(
    child: Form(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
        ],
      ),
    ),
  ),

สร้างและเรียกใช้ แล้วคุณจะได้ผลลัพธ์ต่อไปนี้ในหน้าจอโปรแกรมจำลอง:

ดังที่คุณเห็นในภาพหน้าจอด้านบน เราได้เปลี่ยนสีพื้นหลังของร่างกายเป็นสีขาว นอกจากนี้ เราได้เพิ่ม padding . บางส่วน พร้อมกับ Center วิดเจ็ตเป็นวิดเจ็ตย่อยซึ่งจะรวม UI ทั้งหมดไว้ในเนื้อหา

Center วิดเจ็ตมี Form วิดเจ็ต (หนึ่งในลูกๆ ของมัน) ซึ่งเราจะสร้างแบบฟอร์มง่ายๆ พร้อมช่องข้อความ

และที่สำคัญที่สุด เรามี Column วิดเจ็ตเป็นวิดเจ็ตย่อยของ Form . The Column วิดเจ็ตให้ children . แก่เรา คุณสมบัติอาร์เรย์วิดเจ็ตที่เราสามารถรวมวิดเจ็ตจำนวนเท่าใดก็ได้ที่จะปรากฏบนหน้าจอในแนวตั้ง

ขั้นตอนที่ 3:กำหนดค่าคงที่และตัวแปร

ก่อนนำองค์ประกอบของแบบฟอร์มไปใช้ (รวมถึงช่องข้อความ) เราจำเป็นต้องกำหนดค่าคงที่บางอย่างเพื่อจัดการกับอินพุตจากช่องป้อนข้อมูล

คุณสามารถดูค่าคงที่และตัวแปรที่ต้องการได้ในข้อมูลโค้ดด้านล่าง:

// This is the default bill amount
  static const defaultBillAmount = 0.0;

  // This is the default tip percentage
  static const defaultTipPercentage = 15;

  // This is the TextEditingController which is used to keep track of the change in bill amount
  final _billAmountController =
      TextEditingController(text: defaultBillAmount.toString());

  // This is the TextEditingController which is used to keep track of the change in tip percentage
  final _tipPercentageController =
      TextEditingController(text: defaultTipPercentage.toString());

  // This stores the latest value of bill amount calculated
  double _billAmount = defaultBillAmount;

  // This stores the latest value of tip percentage calculated
  int _tipPercentage = defaultTipPercentage;

ในข้อมูลโค้ดด้านบน คุณจะเห็นว่าเรากำลังใช้ TextEditingController กระบวนการ. วิธีการควบคุมนี้ช่วยให้เราจัดการกับการป้อนข้อความใน TextFormField วิดเจ็ตในภายหลังซึ่งเริ่มต้นเป็นค่าเริ่มต้น

ขั้นตอนที่ 4:เพิ่มฟิลด์แบบฟอร์มอินพุต

ตอนนี้ เราจะเพิ่มช่องแบบฟอร์มอินพุตสองช่องโดยใช้ TextFormField วิดเจ็ต

ขณะใช้วิดเจ็ตนี้ เราจำเป็นต้องกำหนดคุณสมบัติของคอนโทรลเลอร์ด้วยตัวแปรคอนโทรลเลอร์ที่เรากำหนดไว้ก่อนหน้านี้ คุณสามารถดูการใช้งานโค้ดโดยรวมของวิดเจ็ตได้ในข้อมูลโค้ดด้านล่าง:

body: Container(
        color: Colors.white70,
        padding: const EdgeInsets.all(16.0),
        child: Center(
          child: Form(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                TextFormField(
                  key: Key("billAmount"),
                  controller: _billAmountController,
                  keyboardType: TextInputType.numberWithOptions(decimal: true),
                  decoration: InputDecoration(
                      hintText: 'Enter the Bill Amount',
                      labelText: 'Bill Amount',
                      labelStyle: TextStyle(
                        fontSize: 25,
                        letterSpacing: 1,
                        fontWeight: FontWeight.bold
                      ),
                      fillColor: Colors.white,
                      border: new OutlineInputBorder(
                        borderRadius: new BorderRadius.circular(20.0),
                      ),
                    ),
                ),
                SizedBox(height: 25,),
                TextFormField(
                  key: Key("tipPercentage"),
                  controller: _tipPercentageController,
                  keyboardType: TextInputType.number,
                  decoration: InputDecoration(
                    hintText: 'Enter the Tip Percentage',
                    labelText: 'Tip Percentage',
                    labelStyle: TextStyle(
                      fontSize: 25,
                      letterSpacing: 1,
                      fontWeight: FontWeight.bold
                    ),
                    fillColor: Colors.white,
                    border: new OutlineInputBorder(
                      borderRadius: new BorderRadius.circular(20.0),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
      ),

ที่นี่เราได้กำหนด keyboardType คุณสมบัติที่ช่วยให้เราสามารถแสดงประเภทแป้นพิมพ์ที่ต้องการเมื่อผู้ใช้แตะที่ช่องป้อนข้อมูล

นอกจากนี้เรายังมีคุณสมบัติการตกแต่งซึ่งเราสามารถจัดรูปแบบฟิลด์อินพุตของเราโดยใช้ InputDecoration วิดเจ็ต

ใน InputDecoration วิดเจ็ต เรามีคุณสมบัติหลายอย่างที่ช่วยให้เราแสดงข้อความตัวแทนและป้ายกำกับเหนืออินพุตได้ เรายังได้ใช้ border คุณสมบัติเพื่อแสดงเส้นขอบเค้าร่างโค้ง

สร้างและเรียกใช้ แล้วคุณจะได้ผลลัพธ์ต่อไปนี้ในหน้าจอโปรแกรมจำลอง:

ขั้นตอนที่ 5:เพิ่มตัวฟังเหตุการณ์และฟังก์ชัน

เนื่องจากเราจะคำนวณจำนวนทิปทันทีที่ผู้ใช้ป้อนจำนวนเงินหรือเปอร์เซ็นต์ของบิล เราจึงต้องรับฟังการเปลี่ยนแปลงในช่องป้อนข้อความ

ในการนั้น เราจำเป็นต้องเพิ่ม event listener ไปยังคอนโทรลเลอร์โดยใช้ addListener กระบวนการ.

ตอนนี้ ทันทีที่มีการเปลี่ยนแปลงใดๆ เกิดขึ้นในช่องใส่ เรายังต้องการเรียกใช้ฟังก์ชันบางอย่างเพื่ออัปเดตจำนวนเงินที่เรียกเก็บเงินและเปอร์เซ็นต์ของทิป

เราจะใช้ฟังก์ชันที่จำเป็นกับ setState วิธีการที่ช่วยให้เราแสดง UI ทั้งหมดทันทีที่มีการเปลี่ยนแปลงเกิดขึ้น

โปรดทราบว่า setState เมธอดทริกเกอร์การรัน build . อีกครั้ง วิธีการ

คุณสามารถดูการใช้งานการเข้ารหัสโดยรวมได้ในข้อมูลโค้ดด้านล่าง:

@override
void initState() {
  super.initState();
  _billAmountController.addListener(_onBillAmountChanged);
  _tipPercentageController.addListener(_onTipAmountChanged);
}

_onBillAmountChanged() {
  setState(() {
    _billAmount = double.tryParse(_billAmountController.text) ?? 0.0;
  });
}

_onTipAmountChanged() {
  setState(() {
    _tipPercentage = int.tryParse(_tipPercentageController.text) ?? 0;
  });
}

ที่นี่ เรามี initState วิธีการเช่นกัน วิธีนี้จะทำงานทันทีที่เราเข้าสู่หน้าจอของแอปนี้ ดังนั้นเราจึงเพิ่มผู้ฟังเหตุการณ์ทันทีที่เราเข้าสู่หน้าจอ

ขั้นตอนที่ 6:เพิ่มส่วนจำนวนเงิน

กลับไปที่วิดเจ็ต UI ของเรา เราจะเพิ่มส่วนจำนวนเงินที่ด้านล่างช่องป้อนข้อมูลภายในวิดเจ็ตคอลัมน์

ที่นี่ เราจะใช้ SizedBox . ด้วย วิดเจ็ตที่ช่วยให้เราสามารถจัดระยะห่างที่จำเป็นระหว่างวิดเจ็ตได้ คุณสามารถดูการใช้งานการเข้ารหัสของส่วนจำนวนเงินในข้อมูลโค้ดด้านล่าง:

),
SizedBox(height: 20,),
Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      Text("Tip Amount"),
      Text("Total Amount")
    ],
  ),
),

เรามี Container ด้วยการตกแต่งสไตล์ที่จำเป็น child ทรัพย์สินบ้านอีก Column วิดเจ็ตที่มี Text . สองตัว วิดเจ็ตจัดเรียงในแนวตั้ง

สร้างและเรียกใช้ แล้วคุณจะได้ผลลัพธ์ต่อไปนี้ในหน้าจอโปรแกรมจำลอง:

ขั้นตอนที่ 7:สร้างวิดเจ็ตไร้สัญชาติแยกต่างหากเพื่อแสดงจำนวนเงิน

เนื่องจากเราต้องการแสดงจำนวนทิปและจำนวนเงินรวมพร้อมสไตล์เล็กน้อย มันจะไม่มีสถานะใด ๆ แต่จะขึ้นอยู่กับค่าที่ส่งผ่านจากวิดเจ็ต Stateful

คุณสามารถดูการใช้งานการเข้ารหัสโดยรวมของ AmountText คลาสวิดเจ็ตไร้สัญชาติในข้อมูลโค้ดด้านล่าง:

class AmountText extends StatelessWidget {
  final String text;

  const AmountText(
    this.text, {
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(8),
      child: Text(text.toUpperCase(),
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.blueAccent, fontSize: 20)),
    );
  }
}

ที่นี่เราได้ใช้คลาส Constructor เพื่อรับค่าของข้อความจริงที่จะแสดง วิธีการสร้างของคลาสนี้ส่งคืน Container วิดเจ็ตที่มี padding ง่าย ๆ และ Text วิดเจ็ตเป็นวิดเจ็ตย่อย

เนื่องจาก AmountText . ของเรา วิดเจ็ตพร้อมแล้ว ตอนนี้เราสามารถเรียกใช้วิดเจ็ตในวิดเจ็ต Stateful ได้

เราจะเพิ่มวิดเจ็ตใน Column วิดเจ็ตที่เรากำหนดไว้ก่อนหน้านี้ด้วย Text . แบบง่าย วิดเจ็ต เราแค่ต้องแทนที่วิดเจ็ตข้อความด้วย AmountText วิดเจ็ตและส่งค่าข้อความที่ต้องการ

คุณสามารถดูการใช้งานการเข้ารหัสได้ในข้อมูลโค้ดด้านล่าง:

Container(
  margin: EdgeInsets.all(15),
  padding: EdgeInsets.all(15),
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.all(
      Radius.circular(15),
    ),
    border: Border.all(color: Colors.white),
    boxShadow: [
      BoxShadow(
        color: Colors.black12,
        offset: Offset(2, 2),
        spreadRadius: 2,
        blurRadius: 1,
      ),
    ],
  ),
  child: Column(
    children: [
      AmountText(
        'Tip Amount: ${_getTipAmount()}',
        key: Key('tipAmount'),
      ),
      AmountText(
        'Total Amount: ${_getTotalAmount()}',
        key: Key('totalAmount'),
      ),
    ],
  ),
),

ที่นี่เราได้ส่งฟังก์ชั่นภายใน AmountText วิดเจ็ต ฟังก์ชันจะคืนค่าจำนวนทิปและจำนวนเงินทั้งหมด ดังที่คุณเห็นในข้อมูลโค้ดด้านล่าง:

  _getTipAmount() => _billAmount * _tipPercentage / 100;

  _getTotalAmount() => _billAmount + _getTipAmount();

สุดท้าย เราจำเป็นต้องยุติคอนโทรลเลอร์เมื่อออกจากมุมมอง ในการนั้น เราจำเป็นต้องใช้ dispose . ในตัว การทำงาน. ฟังก์ชันนี้ทำงานในขณะที่เรากำลังออกจากหน้าจอปัจจุบัน

ภายในวิธีนี้ เราต้องเรียกใช้คอนโทรลเลอร์ด้วย dispose วิธีการเพื่อยุติตัวควบคุมข้อความอินพุต ซึ่งจะทำให้คอนโทรลเลอร์หยุดฟังการเปลี่ยนแปลงในช่องป้อนข้อมูล

คุณสามารถดูฟังก์ชันการกำจัดในข้อมูลโค้ดด้านล่าง:

@override
void dispose() {
  // To make sure we are not leaking anything, dispose any used TextEditingController
  // when this widget is cleared from memory.
  _billAmountController.dispose();
  _tipPercentageController.dispose();
  super.dispose();
}

สร้างและเรียกใช้เพื่อรับผลลัพธ์ขั้นสุดท้ายของการใช้งาน Tip Calculator ซึ่งคุณสามารถดูได้ในการสาธิตด้านล่าง:

คุณจะสังเกตเห็นว่ามูลค่าของทั้งสองจำนวนเปลี่ยนไปเมื่อเราเปลี่ยนอินพุตในฟิลด์อินพุต

เรามาถึงจุดสิ้นสุดของบทช่วยสอนนี้แล้ว คุณนำเครื่องคำนวณทิปอย่างง่ายมาใช้สำเร็จโดยใช้เฟรมเวิร์ก Flutter และ Dart

จะไปจากที่นี่ที่ไหน

จุดมุ่งหมายหลักของบทช่วยสอนนี้คือการสอนรูปแบบการเขียนโปรแกรมพื้นฐานในเฟรมเวิร์กการพัฒนาแอพ Flutter โดยการสร้าง Tip Calculator อย่างง่าย

มีวิดเจ็ตและส่วนเพิ่มเติมที่น่าสนใจอีกมากมายที่คุณสามารถสำรวจได้ คุณสามารถเปลี่ยน UI ของแอปได้ในขณะที่ยังคงองค์ประกอบการทำงานไว้เหมือนเดิม

โดยรวมแล้ว Flutter ทำให้การออกแบบ UI ที่ซับซ้อนง่ายขึ้นด้วยรูปแบบวิดเจ็ต คุณสามารถสร้าง UI ที่ยอดเยี่ยมได้โดยการซ้อนวิดเจ็ตเข้าด้วยกันโดยใช้คุณสมบัติของลูก

ขั้นตอนต่อไปอาจเป็นการใช้กลไกการนำทางของ Flutter เพื่อนำทางไปยังหน้าจอต่างๆ Flutter ยังช่วยลดความยุ่งยากในการเพิ่มเมนูลิ้นชักแบบกำหนดเองและแท็บด้านล่าง

นี่เป็นเพียงจุดเริ่มต้นของการพัฒนา Flutter มันมีอะไรมากกว่าที่เห็น เราแค่ต้องสำรวจและเขียนโค้ดต่อไป

การสาธิตของโครงการทั้งหมดมีอยู่ใน Codepen

คุณสามารถรับแรงบันดาลใจสำหรับแอป Flutter จากแอปที่มีอยู่แล้วได้

ขอให้สนุกกับการเขียนโค้ด!