Tạo giao diện Flutter đầu tiên – Hello Widgets!

🎉 Giới thiệu nhanh

Tiếp tục hành trình học Flutter, hôm nay chúng ta bắt đầu làm quen với việc tạo giao diện bằng Flutter Widgets.

Nếu hôm qua là nền tảng Dart thì hôm nay chúng ta chính thức bước vào thế giới UI của Flutter rồi 😆

🎯 Mục tiêu hôm nay

• Cài đặt ứng dụng Flutter cơ bản
• Làm quen với các Widget quan trọng đầu tiên: Scaffold, AppBar, Text, Column, Center
• Hiển thị văn bản "Hello Flutter!" giữa màn hình

🧱 Widget là gì?

Trước khi bước vào việc xây dựng app đầu tiên và làm quen với một vài widget cơ bản, chúng ta cùng tìm hiểu xem "widget" là gì trong Flutter nhé.

Trong Flutter, giao diện của ứng dụng được tạo nên hoàn toàn bằng các widget.

Nói đơn giản, widget giống như những "miếng lego" UI – mỗi phần tử giao diện (Button, Text, Image...) đều là một widget.

Ví dụ:

• Một dòng chữ là Text
• Căn giữa nội dung là Center
• Scaffold giống như bộ khung màn hình – nơi chúng ta đặt tiêu đề, nội dung và các nút
• Thanh tiêu đề là AppBar

Các widget có thể lồng vào nhau, tạo nên bố cục phức tạp một cách dễ dàng và trực quan.

Trong Flutter, có hai loại widget chính:

• StatelessWidget: không thay đổi khi chạy (ví dụ: chỉ hiển thị văn bản tĩnh)
• StatefulWidget: có thể thay đổi khi người dùng tương tác (ví dụ: bấm nút để đổi màu, hiển thị số đếm...)

Để tìm hiểu rõ hơn về hai loại widget này thì chúng ta sẽ cùng nhau tìm hiểu ở bài tiếp theo nha 🥰🥰🥰

🏆️ App Flutter đầu tiên trông thế nào?

Dưới đây là đoạn code Flutter đơn giản nhất chúng ta có thể chạy thử trên DartPad Flutter:

import 'package:flutter/material.dart'; void main() { runApp(MyApp());
} class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Demo đầu tiên', home: Scaffold( appBar: AppBar( title: Text('Chào Flutter!'), ), body: Center( child: Text( 'Hello Flutter!', style: TextStyle(fontSize: 24), ), ), ), ); }
}

Giải thích từng phần:

Hình ảnh của app đầu tiên nè

✨ Thử custom giao diện một chút nhỉ?

Đổi màu thanh AppBar

appBar: AppBar( title: Text('Chào Flutter!'), backgroundColor: Colors.deepPurple,
),

Thêm nhiều dòng chữ bằng Column

body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Text('Hello Flutter!', style: TextStyle(fontSize: 24)), SizedBox(height: 10), Text('Lần đầu tạo UI bằng widget 🛠️'), ], ),
),

Sau khi thay đổi màu của thanh AppBar và thêm nội dung trong body thì chúng ta có giao diện như sau

🤔 Vấn đề đã gặp và cách xử lý

Trong bài hôm nay, mình đã tạo được app Flutter đầu tiên. Tuy nhiên lúc đầu cũng gặp vài lỗi nhỏ khiến giao diện chưa hiển thị đúng ý mình. Mình ghi lại ở đây để nếu chúng ta cũng gặp thì biết cách xử lý liền nhé 😄

❗ Giao diện không nằm giữa màn hình

Lúc đầu, mình quên không sử dụng Center và mainAxisAlignment: MainAxisAlignment.center, nên nội dung bị đẩy lên phía trên hoàn toàn, không cân đối. Sau khi thêm Center và chỉnh mainAxisAlignment: MainAxisAlignment.center, cuối cùng mình cũng đã căn giữa được nội dung như ý.

❗ Các dòng chữ bị dính nhau nhìn hơi rối

Trong HTML, để tạo khoảng cách giữa các dòng, chúng ta hay dùng margin. Còn trong Flutter, thay vì dùng margin, chúng ta dùng SizedBox(height: 10), chỉ cần thế là xong, dễ quá đúng không? 😄

Kết luận

Qua bài học ngày hôm nay, mình đã tìm hiểu về Flutter Widgets và cách sử dụng chúng để xây dựng giao diện cho ứng dụng. Ngày mai, mình sẽ tiếp tục tìm hiểu về các widget nâng cao hơn hoặc bắt đầu làm quen với việc tạo giao diện phức tạp hơn 😆😆😆

Lời cuối bài, cảm ơn mọi người đã đọc đến đây! Vì mình đang tìm hiểu Flutter nên có thể sẽ có sai sót, rất mong mọi người góp ý để mình cải thiện hơn. Nếu bạn cũng đang tìm hiểu Flutter, mình chúc các bạn kiên trì và vững bước mỗi ngày. Hẹn gặp lại mọi người ở bài viết ngày mai nhé!