Flutter Mobile Development · บทเรียน

องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ

พัฒนาองค์ประกอบแบบโต้ตอบที่ใช้บ่อย เช่น ปุ่ม TextFields รูปภาพ และไอคอน เพื่อทำให้แอปพลิเคชันน่าใช้งานยิ่งขึ้น

องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ เป็นบทเรียน Flutter Mobile Development ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Flutter Mobile Development และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

Engaging User Interaction

Welcome to creating interactive UIs! In Flutter, interactive elements are key to making your apps useful and fun to use.

These elements let users tap, type, and see dynamic content. We'll explore common ones like buttons, text fields, images, and icons.

Buttons: Your First Interaction

Buttons are fundamental for user actions. Flutter provides several button types, each suited for different emphasis levels:

ElevatedButton: A material design button with a shadow, indicating high emphasis.
TextButton: A text label button with no elevation, for less prominent actions.
OutlinedButton: A button with a border, for medium-emphasis actions.

All buttons typically have an onPressed callback, which defines what happens when the button is tapped.

ElevatedButton in Action

The ElevatedButton is great for primary actions. Let's see how to create one that prints a message when tapped.

The onPressed property takes a function that executes when the button is pressed.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Elevated Button')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print('Button Tapped!');
            },
            child: const Text('Tap Me!')
          ),
        ),
      ),
    );
  }
}

TextButton & OutlinedButton

Beyond ElevatedButton, you'll often use TextButton and OutlinedButton.

TextButton is ideal for secondary actions, like 'Cancel' in a dialog.
OutlinedButton provides a visual border, suitable for actions that need a bit more emphasis than a TextButton but less than an ElevatedButton.

They both share the onPressed property for handling taps.

TextFields for User Input

To get text input from users, Flutter provides the TextField widget. It's highly customizable for various input needs, from simple names to complex multi-line text.

You'll often use a TextEditingController with TextField to programmatically control and retrieve the text input by the user.

Building an Input Field

Here's a basic TextField that uses a TextEditingController. We'll also add a button to display what the user typed.

Notice how the controller is passed to the TextField and used to get its current text.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose(); // Important to dispose controllers!
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Text Field')),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            children: [
              TextField(
                controller: _controller,
                decoration: const InputDecoration(
                  labelText: 'Enter your name',
                  border: OutlineInputBorder(),
                ),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  print('User typed: ${_controller.text}');
                },
                child: const Text('Show Input'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Showing Visuals with Images

Images bring visual appeal to your app. Flutter's Image widget can load images from various sources:

Assets: Image.asset('assets/my_image.png') for local images bundled with your app.
Network: Image.network('https://example.com/image.jpg') for images from the internet.
Files: Image.file(File('path/to/image.jpg')) from the device's file system.
Memory: Image.memory(bytes) from raw byte data.

Loading an Image from Web

Let's display an image directly from a URL using Image.network. This is common for dynamic content.

Make sure you have an internet connection to load network images.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Network Image')),
        body: Center(
          child: Image.network(
            'https://flutter.dev/assets/images/shared/brand/flutter/logo/flutter-lockup-horizontal.png',
            width: 250,
          ),
        ),
      ),
    );
  }
}

Icons for Clarity & Guidance

Icons are small, symbolic images that convey meaning quickly. Flutter has a rich set of built-in Material Design icons, accessible through the Icons class.

You use the Icon widget to display them. Icons are excellent for navigation, indicating actions, or simply adding visual flair.

Adding a Simple Icon

Displaying an icon is straightforward. Just pass an icon from the Icons class to the Icon widget. You can also customize its color and size.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Icon')),
        body: const Center(
          child: Icon(
            Icons.star, // A star icon
            color: Colors.amber,
            size: 100.0,
          ),
        ),
      ),
    );
  }
}

Interactive Elements Challenge

Which of the following are valid ways to display an image in Flutter using the Image widget constructors?

Wrapping Up Interactive UI

Great job! You've learned how to implement essential interactive UI elements in Flutter. We covered:

Buttons: ElevatedButton, TextButton, OutlinedButton for user actions.
TextFields: For collecting user text input.
Images: Displaying visuals from assets or the network.
Icons: Adding symbolic visual cues to your app.

Mastering these elements is crucial for building engaging and user-friendly Flutter applications. Keep practicing!

คำถามที่พบบ่อย

บทเรียน “องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Flutter Mobile Development ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Flutter Mobile Development มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ”

พัฒนาองค์ประกอบแบบโต้ตอบที่ใช้บ่อย เช่น ปุ่ม TextFields รูปภาพ และไอคอน เพื่อทำให้แอปพลิเคชันน่าใช้งานยิ่งขึ้น คุณปฏิบัติ Flutter Mobile Development ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Flutter Mobile Development หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Flutter Mobile Development บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน

บทเรียน “องค์ประกอบส่วนติดต่อผู้ใช้แบบโต้ตอบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Flutter Mobile Development นี้ได้ไหม

ได้ บทเรียน Flutter Mobile Development ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ Flutter Mobile Development