MDC-101 Flutter: ข้อมูลพื้นฐานเกี่ยวกับคอมโพเนนต์วัสดุ

1. บทนำ

Material Design และไลบรารี Material Flutter คืออะไร

Material Design คือระบบสำหรับการสร้างผลิตภัณฑ์ดิจิทัลที่โดดเด่นและสวยงาม การรวมสไตล์ การสร้างแบรนด์ การโต้ตอบ และการเคลื่อนไหวภายใต้ชุดหลักการและคอมโพเนนต์ที่สอดคล้องกันจะช่วยให้ทีมผลิตภัณฑ์ตระหนักถึงศักยภาพด้านการออกแบบที่ยิ่งใหญ่ที่สุด

ไลบรารี Material Flutter มีวิดเจ็ต Flutter ที่ใช้การออกแบบของคอมโพเนนต์ดีไซน์ Material (เรียกสั้นๆ ว่า MDC) เพื่อสร้างประสบการณ์ของผู้ใช้ที่สอดคล้องกันในแอปและแพลตฟอร์มต่างๆ เมื่อระบบ Material Design มีการพัฒนา คอมโพเนนต์เหล่านี้จะได้รับการอัปเดตเพื่อให้มั่นใจว่าการติดตั้งใช้งานระดับพิกเซลจะสอดคล้องกัน โดยเป็นไปตามมาตรฐานการพัฒนาส่วนหน้าของ Google

ในโค้ดแล็บนี้ คุณจะได้สร้างหน้าเข้าสู่ระบบโดยใช้คอมโพเนนต์หลายรายการของ Material Flutter

สิ่งที่คุณจะสร้าง

Codelab นี้เป็น Codelab แรกจากทั้งหมด 4 รายการที่จะแนะนำวิธีสร้างแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะแสดงวิธีปรับแต่งคอมโพเนนต์ให้สอดคล้องกับแบรนด์หรือสไตล์ใดก็ได้โดยใช้ Material Flutter

ในโค้ดแล็บนี้ คุณจะได้สร้างหน้าเข้าสู่ระบบสำหรับ Shrine ซึ่งมีองค์ประกอบต่อไปนี้

  • รูปภาพโลโก้ของ Shrine
  • ชื่อของแอป (Shrine)
  • ช่องข้อความ 2 ช่อง ช่องหนึ่งสำหรับป้อนชื่อผู้ใช้และอีกช่องสำหรับป้อนรหัสผ่าน
  • 2 ปุ่ม

Android

iOS

หน้าเข้าสู่ระบบ Shrine ใน Android

หน้าเข้าสู่ระบบ Shrine ใน iOS

คอมโพเนนต์และระบบย่อยของ Material Flutter ในโค้ดแล็บนี้

  • ช่องข้อความ
  • ปุ่ม
  • หมึกกระเพื่อม (รูปแบบภาพของความคิดเห็นสำหรับเหตุการณ์การแตะ)

คุณจะให้คะแนนระดับประสบการณ์ในการพัฒนาแอปด้วย Flutter เท่าไร

ผู้ฝึกหัด ขั้นกลาง ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนา Flutter

คุณต้องมีซอฟต์แวร์ 2 อย่างเพื่อทำแล็บนี้ให้เสร็จสมบูรณ์ ได้แก่ Flutter SDK และโปรแกรมแก้ไข

คุณเรียกใช้ Codelab ได้โดยใช้อุปกรณ์ต่อไปนี้

  • อุปกรณ์ Android หรือ iOS จริงที่เชื่อมต่อกับคอมพิวเตอร์และตั้งค่าเป็นโหมดนักพัฒนาแอป
  • โปรแกรมจำลอง iOS (ต้องติดตั้งเครื่องมือ Xcode)
  • Android Emulator (ต้องตั้งค่าใน Android Studio)
  • เบราว์เซอร์ (ต้องใช้ Chrome สำหรับการแก้ไขข้อบกพร่อง)
  • ในรูปแบบแอปพลิเคชันเดสก์ท็อป Windows, Linux หรือ macOS คุณต้องพัฒนาบนแพลตฟอร์มที่วางแผนจะใช้งาน ดังนั้น หากต้องการพัฒนาแอปเดสก์ท็อป Windows คุณต้องพัฒนาบน Windows เพื่อเข้าถึงห่วงโซ่การสร้างที่เหมาะสม มีข้อกำหนดเฉพาะของระบบปฏิบัติการที่อธิบายไว้โดยละเอียดใน docs.flutter.dev/desktop

3. ดาวน์โหลดแอปเริ่มต้นของ Codelab

โปรเจ็กต์เริ่มต้นจะอยู่ในไดเรกทอรี material-components-flutter-codelabs-101-starter/mdc_100_series

...หรือโคลนจาก GitHub

หากต้องการโคลนโค้ดแล็บนี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้

git clone https://github.com/material-components/material-components-flutter-codelabs.git
cd material-components-flutter-codelabs/mdc_100_series
git checkout 101-starter

เปิดโปรเจ็กต์และเรียกใช้แอป

  1. เปิดโปรเจ็กต์ในโปรแกรมตัดต่อที่ต้องการ
  2. ทำตามวิธีการเพื่อ "เรียกใช้แอป" ในส่วนเริ่มต้นใช้งาน: ทดลองใช้สำหรับโปรแกรมแก้ไขที่คุณเลือก

สำเร็จ! โค้ดเริ่มต้นสำหรับหน้าเข้าสู่ระบบของ Shrine ควรทำงานบนอุปกรณ์ คุณควรเห็นโลโก้ Shrine และชื่อ "Shrine" อยู่ด้านล่าง

Android

iOS

โลโก้ Shrine

โลโก้ Shrine

มาดูโค้ดกัน

วิดเจ็ตใน login.dart

เปิด login.dart โดยควรมีข้อมูลต่อไปนี้

import 'package:flutter/material.dart';

class LoginPage extends StatefulWidget {
  const LoginPage({Key? key}) : super(key: key);

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

class _LoginPageState extends State<LoginPage> {
  // TODO: Add text editing controllers (101)
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: ListView(
          padding: const EdgeInsets.symmetric(horizontal: 24.0),
          children: <Widget>[
            const SizedBox(height: 80.0),
            Column(
              children: <Widget>[
                Image.asset('assets/diamond.png'),
                const SizedBox(height: 16.0),
                const Text('SHRINE'),
              ],
            ),
            const SizedBox(height: 120.0),
            // TODO: Remove filled: true values (103)
            // TODO: Add TextField widgets (101)
            // TODO: Add button bar (101)
          ],
        ),
      ),
    );
  }
}

โปรดทราบว่าไฟล์นี้มีคำสั่ง import และคลาสใหม่ 2 คลาส ดังนี้

  • คำสั่ง import อนุญาตให้ใช้ไลบรารี Material ในไฟล์นี้
  • LoginPage class แสดงถึงทั้งหน้าเว็บที่แสดงในเครื่องจำลอง
  • ฟังก์ชัน _LoginPageState class build() จะควบคุมวิธีสร้างวิดเจ็ตทั้งหมดใน UI

4. เพิ่มวิดเจ็ต TextField

ก่อนอื่น เราจะเพิ่มช่องข้อความ 2 ช่องในหน้าเข้าสู่ระบบ ซึ่งผู้ใช้จะป้อนชื่อผู้ใช้และรหัสผ่าน เราจะใช้วิดเจ็ต TextField ซึ่งแสดงป้ายกำกับแบบลอยและเปิดใช้งานการกระเพื่อมเมื่อแตะ

หน้านี้สร้างขึ้นโดยใช้ ListView เป็นหลัก ซึ่งจะจัดเรียงองค์ประกอบย่อยในคอลัมน์ที่เลื่อนได้ มาใส่ช่องข้อความด้านล่างกัน

เพิ่มวิดเจ็ต TextField

เพิ่มช่องข้อความใหม่ 2 ช่องและตัวเว้นวรรคหลัง const SizedBox(height: 120.0)

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
const SizedBox(height: 120.0),
// [Password]
TextField(
  decoration: const InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

ช่องข้อความแต่ละช่องมีฟิลด์ decoration: ที่รับวิดเจ็ต InputDecoration filled: หมายความว่าพื้นหลังของช่องข้อความจะมีการเติมสีอ่อนๆ เพื่อช่วยให้ผู้ใช้ทราบว่าพื้นที่เป้าหมายของการแตะหรือสัมผัสช่องข้อความอยู่ตรงไหน ค่า obscureText: true ของช่องข้อความที่ 2 จะแทนที่อินพุตที่ผู้ใช้พิมพ์ด้วยสัญลักษณ์หัวข้อย่อยโดยอัตโนมัติ ซึ่งเหมาะสำหรับรหัสผ่าน

บันทึกโปรเจ็กต์ (ด้วยปุ่มลัด command + s) ซึ่งจะดำเนินการ Hot Reload

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

Android

iOS

โลโก้ Shrine พร้อมช่องชื่อผู้ใช้และรหัสผ่าน

5. เพิ่มปุ่ม

จากนั้นเราจะเพิ่มปุ่ม 2 ปุ่มลงในหน้าเข้าสู่ระบบ ได้แก่ "ยกเลิก" และ "ถัดไป" เราจะใช้ปุ่มวิดเจ็ต 2 ประเภท ได้แก่ TextButton และ ElevatedButton

เพิ่ม OverflowBar

หลังจากช่องข้อความ ให้เพิ่ม OverflowBar ลงในองค์ประกอบย่อยของ ListView ดังนี้

// TODO: Add button bar (101)
OverflowBar(
  alignment: MainAxisAlignment.end,
  // TODO: Add a beveled rectangular border to CANCEL (103)
  children: <Widget>[
    // TODO: Add buttons (101)
  ],
),

OverflowBar จะจัดเรียงวิดเจ็ตย่อยเป็นแถว

เพิ่มปุ่ม

จากนั้นเพิ่มปุ่ม 2 ปุ่มลงในรายการchildrenของ OverflowBar ดังนี้

    // TODO: Add buttons (101)
    TextButton(
      child: const Text('CANCEL'),
      onPressed: () {
        // TODO: Clear the text fields (101)
      },
    ),
    // TODO: Add an elevation to NEXT (103)
    // TODO: Add a beveled rectangular border to NEXT (103)
    ElevatedButton(
      child: const Text('NEXT'),
      onPressed: () {
    // TODO: Show the next page (101) 
      },
    ),

บันทึกโปรเจ็กต์ คุณควรเห็นปุ่ม 2 ปุ่มปรากฏขึ้นใต้ช่องข้อความสุดท้าย ดังนี้

Android

iOS

โลโก้ Shrine พร้อมช่องชื่อผู้ใช้และรหัสผ่าน ปุ่มยกเลิกและปุ่มถัดไป

โลโก้ Shrine พร้อมช่องชื่อผู้ใช้และรหัสผ่าน ปุ่มยกเลิกและปุ่มถัดไป

OverflowBar จะจัดการงานเลย์เอาต์ให้คุณ โดยจะจัดตำแหน่งปุ่มในแนวนอนเพื่อให้ปุ่มปรากฏข้างกัน

การแตะปุ่มจะเริ่มภาพเคลื่อนไหวแบบระลอกหมึกโดยไม่ทำให้เกิดสิ่งอื่นใด มาเพิ่มฟังก์ชันการทำงานลงในฟังก์ชัน onPressed: แบบไม่ระบุตัวตน เพื่อให้ปุ่มยกเลิกจะล้างช่องข้อความ และปุ่มถัดไปจะปิดหน้าจอ

เพิ่ม TextEditingControllers

เราจะเพิ่ม TextEditingControllers เพื่อควบคุมข้อความของช่องข้อความเพื่อให้ล้างค่าของช่องข้อความได้

เพิ่มตัวควบคุมเป็นfinalตัวแปรใต้_LoginPageStateการประกาศของคลาส_LoginPageState

  // TODO: Add text editing controllers (101)
  final _usernameController = TextEditingController();
  final _passwordController = TextEditingController();

ในช่อง controller: ของช่องข้อความแรก ให้ตั้งค่า _usernameController ดังนี้

// TODO: Add TextField widgets (101)
// [Name]
TextField(
  controller: _usernameController,

ในช่องcontroller:ของช่องข้อความที่ 2 ให้ตั้งค่า_passwordControllerดังนี้

// TODO: Add TextField widgets (101)
// [Password]
TextField(
  controller: _passwordController,

แก้ไข onPressed

เพิ่มคำสั่งเพื่อล้างตัวควบคุมแต่ละรายการในฟังก์ชัน onPressed: ของ TextButton ดังนี้

    // TODO: Clear the text fields (101)
    _usernameController.clear();
    _passwordController.clear();

บันทึกโปรเจ็กต์ ตอนนี้เมื่อคุณพิมพ์ข้อความลงในช่องข้อความ การกด "ยกเลิก" จะล้างแต่ละช่องอีกครั้ง

แบบฟอร์มการเข้าสู่ระบบนี้เรียบร้อยดี มานำผู้ใช้ไปยังส่วนอื่นๆ ของแอป Shrine กัน

ป๊อป

หากต้องการปิดมุมมองนี้ เราต้องการป๊อป (หรือนำ) หน้านี้ (ซึ่ง Flutter เรียกว่าเส้นทาง) ออกจากสแต็กการนำทาง

ในฟังก์ชัน onPressed: ของ ElevatedButton ให้เรียกเส้นทางล่าสุดจาก Navigator ดังนี้

        // TODO: Show the next page (101) 
        Navigator.pop(context);

สุดท้าย ให้เปิด home.dart แล้วตั้งค่า resizeToAvoidBottomInset เป็น false ใน Scaffold

    return Scaffold(
      // TODO: Add app bar (102)
      // TODO: Add a grid view (102)
      body: Center(
        child: Text('You did it!'),
      ),
      // TODO: Set resizeToAvoidBottomInset (101)
      resizeToAvoidBottomInset: false,
    );

การทำเช่นนี้จะช่วยให้มั่นใจได้ว่าลักษณะที่ปรากฏของแป้นพิมพ์จะไม่เปลี่ยนขนาดของหน้าแรกหรือวิดเจ็ต

เท่านี้ก็เรียบร้อย บันทึกโปรเจ็กต์ คลิก "ถัดไป" ได้เลย

สำเร็จแล้ว!

Android

iOS

หน้าจอที่ระบุว่า &quot;คุณทำได้แล้ว&quot;

หน้าจอที่ระบุว่า &quot;คุณทำได้แล้ว&quot;

หน้าจอนี้เป็นจุดเริ่มต้นของ Codelab ถัดไป ซึ่งคุณจะได้ทำใน MDC-102

6. ยินดีด้วย

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

ขั้นตอนถัดไป

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

หรือไปที่ MDC-102: โครงสร้างและเลย์เอาต์ของ Material Design เพื่อดูข้อมูลเกี่ยวกับคอมโพเนนต์ที่ครอบคลุมใน MDC-102 สำหรับ Flutter

ฉันทำ Codelab นี้เสร็จได้โดยใช้เวลาและความพยายามที่สมเหตุสมผล

เห็นด้วยอย่างยิ่ง เห็นด้วย เป็นกลาง ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง

ฉันต้องการใช้คอมโพเนนต์ Material ต่อไปในอนาคต

เห็นด้วยอย่างยิ่ง เห็นด้วย เฉยๆ ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง