Flutter交互式组件插件quds_interactive的使用

Flutter交互式组件插件quds_interactive的使用

Quds Interactive

一个易于本地化（可自定义）并且支持动态主题的库！

为什么使用Quds Interactive？

每个现代应用都应该考虑两个因素：

• 用户的语言。
• 设备的亮度模式。

这个库提供了一种简单的方式来控制这些因素，并保存和恢复偏好设置。

如何使用？

初始化

void main() async {
  await QudsInteractiveApp.initialize(
    supportedLanguageCodes: ['en', 'ar_ps', 'fr'],
  );

  // 然后运行你的应用
  runApp(MyApp());
}

包裹应用

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return QudsInteractiveApp(
      builder: (c) => MyHomePage(title: 'Test Translation'.tr),
    );
  }
}

QudsInteractiveApp 用于应用更改到应用中。

翻译

Text('hi_message'.tr); // <- 翻译为默认选择的语言。

自定义语言翻译

Translated(langCode: 'ar', child: CustomWidget());

class CustomWidget extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    var lang = QudsTranslated.of(context);
    return Text(lang.translate('hi_message'));
  }
}

如何支持额外的翻译？

在初始化时，你可以添加更多的特定翻译，

await QudsInteractiveApp.initialize(
  supportedLanguageCodes: ['en', 'ar_ps', 'fr'],
  additionalDictionaries: {'ar': arabicSupport, 'en': englishSupport},
);

ar.dart

var arabicSupport = {
  'app_title': 'عنوان التطبيق',
  'Test Translation': 'تجربة الترجمة',
  'hi_message': 'أهلًا أخي'
};

en.dart

var englishSupport = {
  'app_title': 'App title',
  'hi_message': 'Hi Bro!'
};

如何改变选择的语言和主题？

默认情况下，语言将与设备语言一致，亮度将采用设备的默认选项。要更改语言：

QudsTranslation.setLanguage('en', onChanged: () {
  // 保存语言
  // QudsInteractiveApp.appController.saveStateInSharedPreferences();
});

要切换主题：

QudsTheme.toggleTheme();

该包提供了一个简单的UI来改变当前语言和主题：

// 更改语言
QudsTranslation.showLanguagesSelectionBorderSheet(context);

// 更改主题
QudsTheme.showThemesSelectionBorderSheet(context);

完整示例Demo

import 'package:example/translations/en.dart';
import 'package:example/ui/main_app_lang.dart';
import 'package:example/ui/main_drawer.dart';
import 'package:flutter/material.dart';
import 'package:quds_interactive/quds_interactive.dart';
import 'package:quds_ui_kit/quds_ui_kit.dart';
import 'translations/ar.dart';
import 'ui/translated_as_required.dart';

void main() async {
  await QudsInteractiveApp.initialize(
    supportedLanguageCodes: ['en', 'ar_ps', 'fr', 'es'],
    additionalDictionaries: {'ar': arabicSupport, 'en': englishSupport},
    customFonts: {'ar': 'Cairo'},
    // defaultFont: 'Cairo'
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return QudsInteractiveApp(
      debugShowCheckedModeBanner: false,
      builder: (c) => MyHomePage(title: 'Test Translation'.tr),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const MainDrawer(),
      appBar: AppBar(
        actions: [
          QudsSelectThemeIconButton(),
          QudsSelectLanguageIconButton(),
          IconButton(
            onPressed: () =>
                Navigator.push(
                  context,
                  QudsZoomPageRoute(
                    zoomType: ZoomType.Out,
                    builder: (c) => MyHomePage(title: 'Another Page')),
                ),
            icon: Icon(Icons.arrow_forward_rounded)
          )
        ],
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Container(
          alignment: Alignment.center,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              SizedBox(height: 50),
              Text('Current Language'.tr),
              Text(
                currentLanguage?.langName ?? '',
                style: Theme.of(context).textTheme.headline4,
              ),
              Divider(),
              MainAppLang(),
              Divider(height: 30),
              Text('English'),
              QudsTranslated(langCode: 'en', child: TranslatedAsRequired()),
              Divider(),
              Text('العربية'),
              QudsTranslated(langCode: 'ar', child: TranslatedAsRequired()),
            ],
          ),
        ),
      ),
      floatingActionButton: _buildFloatingButton(),
    );
  }

  Widget _buildFloatingButton() =>
      Row(mainAxisAlignment: MainAxisAlignment.end, children: [
        FloatingActionButton(
          heroTag: 'btn1',
          onPressed: () =>
              QudsTranslation.showLanguagesSelectionBorderSheet(
            context,
            withCountryName: true,
            withFlagImage: false,
          ),
          tooltip: 'Change Language'.tr,
          child: Icon(Icons.language),
        ),
        SizedBox(width: 10),
        FloatingActionButton(
          heroTag: 'btn2',
          onPressed: () =>
              QudsTheme.showThemesSelectionBorderSheet(
            context,
          ),
          tooltip: 'Toggle Theme'.tr,
          child: QudsAnimatedCombinedIcons(
            startIcon: Icons.brightness_5_outlined,
            endIcon: Icons.brightness_3_rounded,
            showStartIcon: !QudsTheme.provider.isDark.value,
          ),
        ),
        SizedBox(width: 10),
        ElevatedButton(
            onPressed: () =>
                showDatePicker(
                  context: context,
                  initialDate: DateTime(2000),
                  firstDate: DateTime(1990),
                  lastDate: DateTime.now(),
                ),
            child: Text('Date'.tr))
      ]);
}