MBS Themes

mbs_themes là một gói Flutter cung cấp các chủ đề và thành phần giao diện người dùng tùy chỉnh cho các ứng dụng của MBS. Gói này giúp các nhà phát triển áp dụng các phong cách giao diện nhất quán cho ứng dụng, tạo ra trải nghiệm đồng nhất trên toàn bộ các sản phẩm.

Tính năng

• Chủ đề (Theme) tuỳ chỉnh với màu sắc, font chữ và các yếu tố giao diện khác theo chuẩn của MBS.
• Thành phần giao diện (Widget) tuỳ chỉnh giúp nhanh chóng triển khai UI cho ứng dụng.
• Hỗ trợ cả chế độ sáng và tối.

Cài đặt

Thêm mbs_themes vào tệp pubspec.yaml của dự án Flutter của bạn:

dependencies:
  mbs_themes:
    git:
      url: https://github.com/mbs/mbs_themes.git
      ref: main
Sau đó, chạy lệnh sau để cài đặt gói:

bash
Sao chép mã
flutter pub get
Sử dụng
1. Thiết lập Chủ đề
Để áp dụng chủ đề mbs_themes vào ứng dụng của bạn, hãy thiết lập ThemeData trong MaterialApp:

dart
Sao chép mã
import 'package:flutter/material.dart';
import 'package:mbs_themes/mbs_themes.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MBS App',
      theme: MbsThemes.lightTheme, // Áp dụng chủ đề sáng
      darkTheme: MbsThemes.darkTheme, // Áp dụng chủ đề tối
      themeMode: ThemeMode.system, // Tự động theo cài đặt của hệ thống
      home: HomeScreen(),
    );
  }
}
2. Sử dụng Thành phần Giao diện Tùy Chỉnh
Gói mbs_themes có thể bao gồm các thành phần giao diện người dùng tùy chỉnh để thống nhất phong cách trên toàn bộ ứng dụng. Ví dụ:

dart
Sao chép mã
import 'package:flutter/material.dart';
import 'package:mbs_themes/mbs_themes.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: MbsButton(
          label: 'Nhấn vào đây',
          onPressed: () {
            // Xử lý sự kiện
          },
        ),
      ),
    );
  }
}
3. Chuyển đổi Chủ đề
Bạn cũng có thể chuyển đổi giữa chủ đề sáng và tối theo yêu cầu của người dùng. Ví dụ:

dart
Sao chép mã
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:mbs_themes/mbs_themes.dart';

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => ThemeProvider(),
      child: MyApp(),
    ),
  );
}

class ThemeProvider with ChangeNotifier {
  ThemeMode _themeMode = ThemeMode.light;

  ThemeMode get themeMode => _themeMode;

  void toggleTheme() {
    _themeMode = _themeMode == ThemeMode.light ? ThemeMode.dark : ThemeMode.light;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return MaterialApp(
      theme: MbsThemes.lightTheme,
      darkTheme: MbsThemes.darkTheme,
      themeMode: themeProvider.themeMode,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        actions: [
          IconButton(
            icon: Icon(Icons.brightness_6),
            onPressed: () {
              themeProvider.toggleTheme();
            },
          ),
        ],
      ),
      body: Center(
        child: Text('Hello, MBS!'),
      ),
    );
  }
}
Tùy chỉnh Chủ đề
Gói mbs_themes cho phép tùy chỉnh các thành phần chủ đề như màu sắc và font chữ. Bạn có thể sửa đổi MbsThemes để phù hợp với yêu cầu của ứng dụng, ví dụ:

dart
Sao chép mã
final ThemeData customTheme = MbsThemes.lightTheme.copyWith(
  primaryColor: Colors.blueAccent,
  textTheme: TextTheme(
    bodyText1: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
  ),
);
Đóng góp
Nếu bạn muốn đóng góp vào mbs_themes, vui lòng mở Pull Request hoặc tạo Issue trên GitHub repository.

Giấy phép
Gói này được phát triển và bảo vệ bởi MBS. Xem thêm trong tệp LICENSE.

css
Sao chép mã

Hy vọng tài liệu này sẽ giúp bạn triển khai `mbs_themes` hiệu quả!