Skip to main content

tasco_ui_kit

Package tasco_ui_kit chứa hệ thống thiết kế (Design System) của Tasco Group, định nghĩa toàn bộ quy chuẩn giao diện như màu sắc (Navy Blue và Teal), kiểu chữ (Typography), khoảng cách (Spacing), các widget dùng chung và cấu trúc bao bọc TascoApp.

1. Thiết kế thương hiệu (Brand Design Tokens)​

  • Màu sắc chủ đạo (Navy Blue): #203368 (Đại diện cho sự chuyên nghiệp, tin cậy của doanh nghiệp).
  • Màu thứ cấp (Teal/Cyan): #6ac9c8 (Đại diện cho sự hiện đại, công nghệ).
  • Phông chữ mặc định: Manrope hoặc Inter cho trải nghiệm đọc văn bản thoải mái trên di động.
  • Dark Mode: Tự động chuyển đổi các biến màu sang tông Teal dịu nhẹ, đảm bảo độ tương phản đạt chuẩn WCAG (AA).

2. Các Widget dùng chung tiêu chuẩn​

  • TascoApp: Gốc chứa cấu hình theme, định tuyến (GoRouter), và ngôn ngữ (Localizations).
  • AppInput: Trường nhập liệu chuẩn hóa có sẵn validation state, màu viền focus.
  • AppButton: Các nút bấm có sẵn hiệu ứng trạng thái (hover, active, disabled).
  • AppAppBar: Thanh tiêu đề chuẩn hóa với màu nền đồng bộ hệ thống.

3. Hướng dẫn sử dụng​

Khởi chạy TascoApp trong file main​

import 'package:flutter/material.dart';
import 'package:tasco_ui_kit/tasco_ui_kit.dart';
import 'package:tasco_core/tasco_core.dart';

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

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

  @override
  Widget build(BuildContext context) {
    // Khởi chạy widget TascoApp cung cấp sẵn theme doanh nghiệp
    return TascoApp(
      title: 'Tasco SuperApp',
      routerConfig: appRouter, // định tuyến GoRouter của Shell
      localizationsDelegates: const [
        // Gộp các delegates dịch thuật của Shell + Mini-apps
        ...AppLocalizations.localizationsDelegates,
      ],
    );
  }
}

Sử dụng Custom Widget trong trang (Page)​

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: const AppAppBar(
        title: Text('Đăng nhập'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            const AppInput(
              labelText: 'Số điện thoại',
              hintText: 'Nhập số điện thoại đăng ký',
              keyboardType: TextInputType.phone,
            ),
            const SizedBox(height: 16),
            AppButton.primary(
              onPressed: () {
                // Xử lý đăng nhập
              },
              child: const Text('Đăng nhập'),
            ),
          ],
        ),
      ),
    );
  }
}