การติดตั้งและใช้งาน Package ภายนอก ใน Flutter เบื้องต้น

เขียนเมื่อ 4 ปีก่อน โดย Ninenik Narkdee
flutter setstate external package

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ flutter setstate external package

ดูแล้ว 12,317 ครั้ง




เนื้อหาตอนต่อไปนี้ เราจะมาดูเกี่ยวกับการติดตั้ง Package จาก
ภายนอก เพื่อมาใช้งานร่วมกับ App ของเรา โดย package ภายนอก
คือส่วนเสริม ที่เราสามารถนำมาใช้งาน เพื่อให้การพัฒนา app สะดวก
รวดเร็ว และลดขั้นตอนในการทำงานบางอย่าง ที่เราไม่จำเป็นต้องกำหนด
หรือสร้างขึ้นมาเองใหม่
    เราจะใช้โครงสร้าง App เริ่มต้นจากเนื้อหาของบทความในหัวข้อ
    การใช้งาน Stateless และ Stateful Widget ใน Flutter เบื้องต้น http://niik.in/954
 
    ไฟล์ first_screen.dart เริ่มต้น สำหรับเนื้อหานี้
 
import 'package:flutter/material.dart';

// ส่วนของ Stateful widget
class FirstScreen extends StatefulWidget{
    @override
    State<StatefulWidget> createState() {
        return _FirstScreen();
    }
}
class _FirstScreen extends State<FirstScreen>{
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Welcome to Flutter'),
                backgroundColor: Colors.green
            ),
            body: Center(
                    child: Text(
                        'Hello World',
                        style: TextStyle(color: Colors.black,  fontSize: 20.0)
                    )
            ),
        );
    }
}
 
 

การติดตั้ง Package จากภายนอก

    สำหรับ Package ที่เราจะใช้งานชื่อว่า english_words สามารถคลิกเข้าไปดูรายละเอียดของ package ซึ่งรวบรวมไว้ที่เว็บไซต์ 
Pub.dev เป็นแหล่งรวม Dart Package ต่างๆ ทั้งที่สามารถใช้กับ Flutter หรือ Web หรือ App อื่นๆ ที่พัฒนาโดยใช้ ภาษา Dart
    ต่อไปเป็นขั้นตอนการติดตั้ง package มาใช้งานใน App โปรเจ็คของเรา โดยให้เปิดไฟล์ pubspec.yaml แล้วทำการเพิ่ม
package ชื่อ "english_words" ลงไปตามรูป โดยข้างต้น เวอร์ชั่นล่าสุดเป็น "^4.0.0" โดยเพิ่มเป็น "english_words: ^4.0.0"
 
 

 
 
    หลังจากกำหนด และบันทึกเรียบร้อยแล้ว ให้ทำการ ดาวน์โหลด package นั้นมายังโปรเจ็คของเราโดยใช้คำสั่ง flutter pub get
ผ่าน command line หรือ หน้าต่าง Terminal ใน Android Studio ของโปรเจ็คของเรา
 
 

 
 
    เมื่อทำการโหลด package มาเรียบร้อยแล้ว ส่วนของ Dart Package จากภานนอกจะมีชื่อ package ที่เราเพิ่มเข้ามา และในไฟล์ 
pubspec.lock ก็จะบันทึกข้อมูลการใช้งาน package ที่เพิ่มเข้ามา ไว้ใช้กรณีที่เราแชร์หรือนำโค้ดไปพัฒนาเครื่องอื่น จะได้อ้างอิง
รายการ package ที่จะต้องใช้ในโปรเจ็คว่ามีอะไรบ้าง
 
 

 
 
    ในตอนนี้เราได้ "english_words" package มาพร้อมใช้งานแล้ว ซึ่งจะเป็น package ที่รวมคำในภาษาอังกฤษกว่า 5000 คำ มีฟังก์ชั่น
ในการจัดการ เช่น การนำคำสองคำมาต่อเป็นคำเฉพาะใหม่ หรือการใช้คำสั่งแปลงรูปแบบการแสดงคำ ยกตัวอย่าง เช่นคำว่า "franceland"
ในรูปแบบ asCamelCase จะเป็น "franceLand" รูปแบบ asPascalCase จะเป็น "FranceLand" รูปแบบ asSnakeCase จะเป็น "france_land"
 
 
 

การใช้งาน Package ภายนอก

    หลังจากติดตั้ง package เสร็จแล้ว ต่อไปเราจะนำมาใช้งานใน _FirstScreen state โดยให้ทำกร import เข้ามาใช้งาน ในไฟล์
first_screen.dart กำหนดต่อจาก flutter material package ดังนี้
 
import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';
    ในไฟล์ first_screen.dart ส่วนของ _FirstScreen state ตอนนี้เรากำหนดการแสดงข้อความคำว่า "Hello World" โดยมีการจัดรูปแบบ
ข้อความเป็นขนาด 20px  เราต้องการพัฒนา App อย่างง่ายโดยใช้งานร่วมกับ "english_words" package โดยให้แสดงข้อความ Random
แทนคำว่า "Hello World" และมีปุ่ม FloatingActionButton สำหรับเปลี่ยนเป็นข้อความใหม่ๆ เมื่อคลิก 
    จะได้ส่วนของ _FirstScreen state เบื้องต้นดังนี้

 

 
 
    จากโค้ด บรรทัดที่ 12 และ 13 เรากำหนดตัวแปรให้กับคำว่า "Hello World" และกำหนดตัวแปรให้กับ TextStyle สำหรับเป็นรูปแบบ
การแสดงของข้อความ Random ตามลำดับ ซึ่งตอนนี้เราข้อความ Random เป็น "Hello World" ไปก่อน  ตัวแปร _randomWord และ
_biggerFont เป็น private property ของ _FirstScreen state class โดยค่า _biggerFont เป็น final ไม่สามารถเปลี่ยนแปลงได้
หน้าตาของตัวอย่างจากโค้ดข้างต้น จะเป็นดังนี้
 
 

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

 
 
    บรรทัดที่ 12 เราปรับค่าตัวแปรจากเดิมเมื่อรัน App ขึ้นมาจะขึ้นว่า "Hello World" ก็เปลี่ยนเป็นข้อความ random ที่ใช้จาก package
ที่ import มาใช้งาน โดยใช้คำสั่ง WordPair.random() เพื่อสร้างคำใหม่จากสองคำมาต่อกัน จะได้เป็น WordPair Object ซึ่งจะไม่สามารถ
นำมากำหนดให้ข้อความ String ได้ เพราะไม่ใช่ประเภทเดียวกัน ดังนั้น เราจึงต่อด้วย .asPascalCase ซึ่งเป็น property  ค่าที่เป็นข้อความ
String โดยอยู่ในรูปแบบ "FranceLand" ตามที่ได้อธิบายไปแล้วในตอนต้น
    ต่อมาเราสร้างฟังก์ชั่นชื่อ _generateWord() เพื่อสำหรับเปลี่ยนแปลงค่า _randomWord property ของ state พร้อมกับเรียกใช้งาน
คำสั่ง setState() เพื่อ rebuild สร้าง WidgetElement ใหม่เมื่อมีการเปลี่ยนแปลงข้อความ  และฟังก์ชั่น _generateWord จะถูกเรียกใช้
เมื่อทำการกดที่ปุ่ม "Renew" ตามตัวอย่างโค้ดในบรรทัดที่ 36  ผลลัพธ์ที่ได้ เมื่อเรียกใช้งาน และกดที่ปุ่ม "Renew" จะแสดงข้อความ
Random ใหม่ดังรูปด้านล่าง
 
 

 
 
    ตอนนี้เราได้รู้จักการนำ package จากภายนอกมาติดตั้ง และการนำมาใช้งานในโปรเจ็ค App เบื้องต้นไปแล้ว พร้อมกับทำความคุ้นเคย
กับการใช้งานคำสั่ง setState() เพืออัพเดท property ของ _FirstScreen state widget และ rebuild สร้าง Element ใหม่มาแทนที่ตัวเดิม
เพื่อแสดงข้อวาม Random ใหม่ รวมถึงได้รู้จักการเรียกใช้งานฟังก์ชั่น _generateWord() ที่เราสร้างขึ้ผ่าน การใช้งาน FloatingActionButton
เหล่านี้ล้วนเป็นแนวทาง ทำความเข้าใจเบื้องต้นในการพัฒนา App
    ในตอนหน้าเรายังอยู่ในเนื้อหาการใช้งาน "english_words" package โดยจะเป็นการประยุกต์สร้างและใช้งาน ListView รอติดตาม


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 08-12-2019


    โค้ดไฟล์ first_screen.dart ของเนื้อหานี้


import 'package:flutter/material.dart';
import 'package:english_words/english_words.dart';

// ส่วนของ Stateful widget
class FirstScreen extends StatefulWidget{
    @override
    State<StatefulWidget> createState() {
        return _FirstScreen();
    }
}
class _FirstScreen extends State<FirstScreen>{
    String _randomWord = WordPair.random().asPascalCase;
    final _biggerFont = const TextStyle(color: Colors.black,  fontSize: 20.0);

    void _generateWord(){
        setState(() {
            _randomWord = WordPair.random().asPascalCase;
        });
    }

    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Welcome to Flutter'),
                backgroundColor: Colors.green
            ),
            body: ListTile(
                title: Text(
                    _randomWord,
                    style: _biggerFont,
                ),
            ),
            floatingActionButton: FloatingActionButton(
                backgroundColor: Colors.green,
                onPressed: _generateWord,
                child: Icon(Icons.add),
            ),
        );
    }
}


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



อ่านต่อที่บทความ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง









URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

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


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ