Xây dựng ứng dụng Flutter bằng nền tảng Widget cụ thể

08-06-2024
Toanngo92
0 Comments

Mục lục

Scaffold

Scaffold là một widget tích hợp trong Flutter, được sử dụng để triển khai tất cả các bố cục hình ảnh. Nó cũng được sử dụng để tạo ra cấu trúc cơ bản cho bố cục chức năng của ứng dụng.

Sử dụng Scaffold, chúng ta có thể nhanh chóng triển khai các widget chức năng như FloatingActionButton, AppBar, Drawer, BottomNavigationBar, và nhiều widget khác vào ứng dụng.

AppBar

AppBar là một thành phần quan trọng của Scaffold và nó được hiển thị theo chiều ngang ở phần trên cùng của màn hình. Nó thường được sử dụng để hiển thị tiêu đề của ứng dụng.

Hình bên dưới cho thấy định nghĩa của constructor của Scaffold trong thư viện Dart và các thuộc tính mà constructor chấp nhận.

BottomNavigationBar

BottomNavigationBar giống như AppBar, nhưng nó được hiển thị ở phần dưới cùng của trang. Có thể sử dụng BottomNavigationBar() hoặc BottomAppBar() widget trên Scaffold.

Code Snippet 1 dưới đây là một ví dụ về việc sử dụng Scaffold, AppBar, BottomNavigationBar, và FloatingActionButton:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyStatefulWidget(),
    );
  }
}

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

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

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  int _selectedIndex = 0;

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.amber,
      appBar: AppBar(
        title: Text('Scaffold Example'),
      ),
      body: Center(
        child: Text('Hi, happy learning Flutter!!!'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.camera),
            label: 'Take Photo',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => setState(() {}),
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      drawer: Drawer(
        elevation: 20.0,
        child: Column(
          children: <Widget>[
            UserAccountsDrawerHeader(
              accountName: Text("Flutter Learning"),
              accountEmail: Text("Flutterlearning@gmail.com"),
              currentAccountPicture: CircleAvatar(
                backgroundColor: Colors.blue,
                child: Text("Ross"),
              ),
            ),
            ListTile(
              title: Text("Inbox"),
              leading: Icon(Icons.mail),
            ),
            Divider(height: 0.1),
            ListTile(
              title: Text("Primary"),
              leading: Icon(Icons.inbox),
            ),
            ListTile(
              title: Text("Social"),
              leading: Icon(Icons.people),
            ),
            ListTile(
              title: Text("Promotions"),
              leading: Icon(Icons.local_offer),
            ),
          ],
        ),
      ),
    );
  }
}

Hình bên dưới minh họa kết quả đầu ra của ứng dụng từ Đoạn mã trên, hiển thị rõ ràng AppBar ở trên cùng, BottomNavigationBar ở dưới cùng và FloatingActionButton ở trung tâm. Những thành phần này là cơ bản trong việc xây dựng một ứng dụng Flutter có cấu trúc và tương tác.

TabBar và TabBarView

Các tab là một tính năng phổ biến trong nhiều ứng dụng, cho phép người dùng dễ dàng chuyển đổi giữa các chế độ xem khác nhau. Flutter cung cấp TabBar để tạo các tab và TabBarView cho nội dung của mỗi tab. Khi sử dụng các widget này, cần có một TabController để quản lý các tab. DefaultTabController là cách được ưu tiên để xử lý các tab vì sự đơn giản của nó.

Dưới đây là một chương trình mẫu minh họa việc sử dụng TabBar và TabBarView:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: const Text('Travel Application - Demo'),
            bottom: const TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
          ),
          body: const TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Hình bên trên sẽ hiển thị một ứng dụng với giao diện dạng tab. AppBar chứa tiêu đề “Travel Application – Demo” và một TabBar với ba biểu tượng (ô tô, phương tiện công cộng và xe đạp). Bên dưới, TabBarView hiển thị nội dung cho tab đã chọn.

Thiết lập này minh họa cách tạo giao diện dạng tab trong Flutter bằng cách sử dụng TabBar và TabBarView, được quản lý bởi DefaultTabController để đơn giản và dễ sử dụng.

ListTile

Widget ListTile chứa các thành phần title, subtitle, leading, và trailing, làm cho nó hoàn hảo cho các trường hợp sử dụng như Hồ sơ, Các nút Hàng, Các phần Hỏi đáp, và nhiều hơn nữa. Đoạn mã bên dưới minh họa việc sử dụng ListTile.

ListTile(
  title: Text('Demo ListTile'),
  subtitle: Text('Usage of ListTile'),
  trailing: Icon(
    Icons.favorite,
    color: Colors.red,
  ),
);

Hình bên dưới sẽ hiển thị kết quả của chương trình triển khai ListTile. Các thành phần title, subtitle, và biểu tượng trailing được đánh dấu.

Buttons

Khi tạo một ứng dụng đơn giản với trang đăng nhập, sau khi người dùng nhập tên người dùng và mật khẩu, ứng dụng sẽ chuyển người dùng đã xác thực đến màn hình chào mừng. Ở đây, logic cho việc xác thực xảy ra khi nút được nhấn sau khi người dùng nhập tên người dùng và mật khẩu.

Buttons là các thành phần Material trong Flutter được sử dụng để kích hoạt các hành động như gửi biểu mẫu, thực hiện lựa chọn, và nhiều hơn nữa. Buttons là một trong những thành phần giao diện người dùng quan trọng khi thiết kế ứng dụng.

Ví dụ, một nút văn bản để hiển thị văn bản và một nút biểu tượng để hiển thị một biểu tượng có thể nhấp. Ngoài các nút, Flutter cũng cung cấp nhiều tính năng khác nhau để tạo kiểu và định hình các nút.

Sau đây là các loại nút trong Flutter:

Raised Button
Floating Action Button
Icon Button
Popup Menu Button

Raised Button

Trong Flutter, widget RaisedButton tạo thêm chiều không gian cho giao diện người dùng theo trục z với các gợi ý về bóng.

RaisedButton đã bị loại bỏ. Để hiển thị một nút theo cách tương tự như RaisedButton, bạn có thể sử dụng ElevatedButton. Trong ElevatedButton, các tham số kiểu dáng có sẵn, nhưng trong RaisedButton chỉ có một vài tham số kiểu dáng được định nghĩa trước. Ngoài ra, tất cả các chức năng đều giống nhau. Có nhiều thuộc tính có thể được thiết lập cho RaisedButton. Một số thuộc tính quan trọng nhất bao gồm màu nút, màu văn bản, và màu khi nút bị vô hiệu hóa, chiều cao, thời gian hoạt ảnh, hình dạng, bù đắp, và nhiều thuộc tính khác. Nút nâng lên cũng có các hàm gọi lại.

Một số hàm gọi lại bao gồm:

Lưu ý rằng nút nâng lên sẽ ở trạng thái bị vô hiệu hóa nếu các hàm gọi lại onPressed() và onLongPress() không có sẵn.

Floating Action Button

Đây là một nút tròn với một biểu tượng, treo ở đầu nội dung. Nó hỗ trợ hành động chính trong ứng dụng, có nghĩa là nó được sử dụng để tạo sự chú ý đặc biệt mà người dùng dễ dàng bị thu hút. Các nút hành động nổi thường được sử dụng trong trường Scaffold.floatingActionButton. Đây là một tham số trong widget Scaffold mà bạn có thể sử dụng để thêm một nút nổi.

Icon Button

Trong Flutter, mặc định có nhiều loại nút như ElevatedButton, TextButton, OutlinedButton, và nhiều hơn nữa. Tuy nhiên, hầu hết các nút chỉ chứa văn bản. Có một loại nút khác không sử dụng văn bản, mà thay vào đó sử dụng các biểu tượng thay cho văn bản. Những nút này được gọi là IconButton và chúng là một trong những nút được sử dụng nhiều nhất trong thư viện Flutter để tạo giao diện người dùng.

Popup Menu Button

Nút này hiển thị một menu pop-up khi được nhấn và người dùng có thể chọn một mục từ menu xuất hiện. Có thể có nhiều tùy chọn trong menu pop-up xuất hiện và người dùng có thể chọn bất kỳ tùy chọn nào họ muốn dựa trên yêu cầu tại thời điểm đó.

User Input Widgets

Khi cần đầu vào từ người dùng, các widget đầu vào người dùng được sử dụng. Ví dụ, nếu cần thông tin hồ sơ của người dùng thì có thể yêu cầu tên người dùng, giới tính và các loại dịch vụ mà người dùng cung cấp. Một ứng dụng có thể sử dụng các widget đầu vào người dùng để nhận các dữ liệu này. TextField có thể được sử dụng để nhận tên, RadioButton để nhận giới tính, và CheckBox để nhận các dịch vụ khác nhau mà người dùng cung cấp.

Trong Flutter, có nhiều widget đầu vào dữ liệu giúp nhà phát triển nhận được nhiều loại thông tin khác nhau từ người dùng.

Dưới đây là một số widget đầu vào có sẵn trong Flutter:

TextField
RadioButton
CheckBox

TextField

TextField được sử dụng để nhận dữ liệu đầu vào chữ và số (chẳng hạn như tên người dùng, mật khẩu, giá sản phẩm, năm xuất bản, v.v.) từ bàn phím vào ứng dụng. Quan trọng là cần lưu ý rằng, theo mặc định, nội dung từ widget này được trang trí bằng gạch dưới và có thể thay đổi hành vi của widget bằng các tùy chọn trang trí bổ sung.

RadioButton

Nút này thường được sử dụng khi muốn chọn một tùy chọn duy nhất từ danh sách các tùy chọn. Các tùy chọn như Nam/Nữ/Khác, Đúng/Sai, Độc thân/Kết hôn/Góa bụa, v.v. có thể được đưa ra và một giá trị có thể được chọn từ danh sách này bằng cách sử dụng RadioButton. Quan trọng cần lưu ý rằng hành vi mặc định của RadioButton là chỉ chọn một tùy chọn duy nhất. Hành vi này không thể thay đổi.

CheckBox

Tùy chọn này giúp chọn nhiều tùy chọn cùng một lúc. Ví dụ, khi phát triển một tính năng liên quan đến việc chọn nhiều đầu vào hoặc tham số từ người dùng, có thể sử dụng các hộp kiểm. Ví dụ, để kiểm tra các dịch vụ mà một nhà cung cấp cung cấp, có thể nhận đầu vào từ một hộp kiểm. Hình 3.6 hiển thị một số widget đầu vào người dùng trong Flutter.

DatePickers and Dialogs

DatePickers và dialogs là các widget đơn giản cho phép người dùng chọn một ngày, xem ngày cảnh báo, hoặc xác nhận bất kỳ hành động nào. Ví dụ – xác nhận xem người dùng có muốn đăng xuất hay không hoặc xác nhận có thực hiện thanh toán hay không.

DatePicker and TimePicker

Đây là một widget trong Flutter cho phép người dùng chọn ngày và giờ. Nếu không có sẵn widget để tạo bộ chọn ngày và giờ, các hàm showDatePicker() và showTimePicker() có thể được sử dụng để đạt được điều này. Hai hàm này hiển thị lựa chọn ngày và giờ theo Material Design trong một hộp thoại bằng cách gọi các hàm có sẵn của Flutter là showDatePicker() và showTimePicker() tương ứng. Ngoài ra, cần lưu ý rằng constructor của DatePicker có ba giá trị chính.

Dưới đây là một số ví dụ về các giá trị hoặc tùy chọn có thể được đưa vào ứng dụng khi sử dụng DatePicker:

firstDate: Ngày đầu tiên mà người dùng có thể chọn. Họ không thể chọn ngày trước ngày bắt đầu được chỉ định.
initialDate: Ngày ban đầu sẽ được chọn khi hộp thoại lần đầu tiên được mở.
lastDate: Ngày cuối cùng mà người dùng không thể chọn quá ngày này.

TimePicker Constructor

Constructor của TimePicker có tham số initialTime. DatePicker không thể được sử dụng mà không có initialTime. Ngoài ra, thời gian bắt đầu có kiểu TimeOfDay mô tả thời gian bắt đầu khi người dùng mở hộp thoại.

Cần lưu ý rằng initialTime cũng có thể hiển thị thời gian hiện tại. Thời gian hiện tại đại diện cho thời gian của ngày hôm nay và sẽ được làm nổi bật trong lưới thời gian. Nếu không có giá trị nào được chỉ định, TimeOfDay.now() sẽ được sử dụng, đại diện cho thời gian và ngày hiện tại. Hình 3.7 A và B hiển thị các hộp thoại DatePicker và TimePicker trong Flutter.

Ví dụ về DatePicker

Future<void> _selectDate(BuildContext context) async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2101),
  );
  if (picked != null && picked != selectedDate)
    setState(() {
      selectedDate = picked;
    });
}

Ví dụ về TimePicker

Future<void> _selectTime(BuildContext context) async {
  final TimeOfDay? picked = await showTimePicker(
    context: context,
    initialTime: TimeOfDay.now(),
  );
  if (picked != null && picked != selectedTime)
    setState(() {
      selectedTime = picked;
    });
}

Simple Dialog and AlertDialog

Dialog là một widget trong Flutter xuất hiện trên màn hình bất cứ khi nào người dùng cần quyết định về một thông tin quan trọng nào đó.

Các hộp thoại cảnh báo là một loại widget thiết kế theo phong cách vật liệu trong Flutter, thông báo cho người dùng về những tình huống cần phải chú ý. Đoạn mã 4 dưới đây mô tả cách sử dụng widget AlertDialog trong Flutter.

showDialog(
  context: context,
  builder: (_) {
    return AlertDialog(
      title: Text('Alert Dialog'),
      content: Text('This is an Alert Dialog!'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('Cancel'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: Text('OK'),
        ),
      ],
    );
  },
);