Merge pull request #63 from mkobuolys/feat/localization-controls

feat: add localization controls

CHANGELOG.md

@@ -1,6 +1,8 @@
 # Next
 
 - feat: add support for slide deck localization
+- feat: add controls for localization
+- docs: add table of contents to README.md
 
 # 0.11.1
 

README.md

@@ -15,6 +15,37 @@ Demo: https://mkobuolys.github.io/flutter_deck/
 - 🚀 Predictable API to access the slide deck state and its methods from anywhere in the app.
 - 📦 Out of the box slide templates, widgets, transitions and controls.
 - 🎨 Custom theming and light/dark mode support.
+- 🌍 Built-in localization support.
+
+## Table of contents
+
+- **[Installation 💻](#installation-💻)**
+- **[Hello flutter_deck! 🧑‍💻](#hello-flutter_deck-🧑‍💻)**
+- **[Slide templates 📃](#slide-templates-📃)**
+  - **[Title slide](#title-slide)**
+  - **[Blank slide](#blank-slide)**
+  - **[Big fact slide](#big-fact-slide)**
+  - **[Image slide](#image-slide)**
+  - **[Quote slide](#quote-slide)**
+  - **[Split slide](#split-slide)**
+  - **[Template slide](#template-slide)**
+  - **[Custom slide](#custom-slide)**
+- **[Generating slides ⚙️](#generating-slides-⚙️)**
+- **[Theming 🎨](#theming-🎨)**
+- **[Slide visibility 🙈](#slide-visibility-🙈)**
+- **[Widgets 🧱](#widgets-🧱)**
+  - **[FlutterDeckBulletList](#flutterdeckbulletlist)**
+  - **[FlutterDeckCodeHighlight](#flutterdeckcodehighlight)**
+- **[Accessing slide deck state from the code 🔧](#accessing-slide-deck-state-from-the-code-🔧)**
+- **[Transitions ➡️](#transitions-➡️)**
+- **[Steps 🐾](#steps-🐾)**
+- **[Localization 🌍](#localization-🌍)**
+- **[Controls 🕹️](#controls-🕹️)**
+  - **[Navigation drawer](#navigation-drawer)**
+  - **[Marker tool](#marker-tool)**
+  - **[Auto-play](#auto-play)**
+  - **[Changing locale](#changing-locale)**
+- **[Presentations built with flutter_deck 🚀](#presentations-built-with-flutter_deck-🚀)**
 
 ## Installation 💻
 
@@ -33,7 +64,7 @@ Install it:
 flutter packages get
 ```
 
-## Hello <s>World</s> flutter_deck! 🧑‍💻
+## Hello flutter_deck! 🧑‍💻
 
 Use `FlutterDeckApp` as your slide deck's root widget and pass a list of `FlutterDeckSlideWidget` widgets to it:
 
@@ -139,7 +170,7 @@ FlutterDeckApp(
 );
 ```
 
-## Slides
+## Slide templates 📃
 
 To create a slide, extend the `FlutterDeckSlideWidget` class and override the `build` method that returns a `FlutterDeckSlide` widget. `FlutterDeckSlide` supports a few predefined slide templates that help you to create a slide faster.
 
@@ -412,7 +443,7 @@ class CustomSlide extends FlutterDeckSlideWidget {
 }
 ```
 
-## Generating slides
+## Generating slides ⚙️
 
 This package comes with a [mason][mason_link] template that can be used to generate a new slide for the slide deck.
 
@@ -438,7 +469,7 @@ Generate a new slide:
 mason make flutter_deck_slide
 ```
 
-## Theming
+## Theming 🎨
 
 You can customize the theme of your slide deck by providing a `FlutterDeckThemeData` to the `FlutterDeckApp` widget:
 
@@ -530,7 +561,7 @@ FlutterDeckSlide.template(
 );
 ```
 
-## Slide visibility
+## Slide visibility 🙈
 
 By default, all slides are visible and available in the slide deck. However, you can hide a slide by setting the `hidden` property to `true` for the slide configuration:
 
@@ -555,7 +586,7 @@ class HiddenSlide extends FlutterDeckSlideWidget {
 }
 ```
 
-## Widgets
+## Widgets 🧱
 
 This package comes with a few predefined widgets that could be used in your slide deck.
 
@@ -645,7 +676,7 @@ class CodeHighlightSlide extends FlutterDeckSlideWidget {
 
 ![FlutterDeckCodeHighlight](https://github.com/mkobuolys/flutter_deck/blob/main/images/code_highlighting.png?raw=true)
 
-## Accessing slide deck state from the code
+## Accessing slide deck state from the code 🔧
 
 By using the `FlutterDeck` extensions, you can access the slide deck state and its methods from anywhere in the app:
 
@@ -684,7 +715,7 @@ Widget build(BuildContext context) {
 }
 ```
 
-## Transitions
+## Transitions ➡️
 
 This package comes with a few predefined transitions that can be used for your slides:
 
@@ -764,7 +795,7 @@ class CustomTransitionSlide extends FlutterDeckSlideWidget {
 }
 ```
 
-## Steps
+## Steps 🐾
 
 Steps is a feature that allows you to navigate through a slide, well, step by step. You can access the current step from any widget. This way, you can reveal or hide content, run animations, etc.
 
@@ -814,7 +845,24 @@ Widget build(BuildContext context) {
 
 ![Steps demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/steps.gif?raw=true)
 
-## Controls
+## Localization 🌍
+
+This package comes with a built-in localization support. You can change the locale of the slide deck at runtime (see [controls](#controls)). The updated locale will be applied to the whole slide deck.
+
+To localize the slide deck, follow the instructions provided in the [official Flutter documentation](https://flutter.dev/docs/development/accessibility-and-localization/internationalization).
+
+Then, provide `AppLocalizations` when creating the slide deck:
+
+```dart
+FlutterDeckApp(
+  <...>
+  locale: const Locale('en'), // The initial locale of the slide deck
+  localizationsDelegates: AppLocalizations.localizationsDelegates,
+  supportedLocales: AppLocalizations.supportedLocales,
+);
+```
+
+## Controls 🕹️
 
 By default, every slide deck comes with a presenter toolbar that can be used to control the slide deck. Also, some of the controls can be accessed by using keyboard shortcuts.
 
@@ -873,6 +921,12 @@ The auto-play feature allows you to automatically navigate through the slide dec
 
 ![Auto-play demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/autoplay.gif?raw=true)
 
+### Changing locale
+
+You can change the locale of the slide deck at runtime. The updated locale will be applied to the whole slide deck. The locale can be changed using the presenter toolbar.
+
+![Localization demo](https://github.com/mkobuolys/flutter_deck/blob/main/images/localization.gif?raw=true)
+
 ## Presentations built with flutter_deck 🚀
 
 | Title                                                                                                                                                           | Language   | Author                                                                                       |

example/l10n.yaml

@@ -0,0 +1,3 @@
+arb-dir: lib/l10n/arb
+template-arb-file: messages_en.arb
+output-localization-file: app_localizations.dart

example/lib/l10n/arb/messages_en.arb

@@ -0,0 +1,7 @@
+{
+  "@@locale": "en",
+  "helloWorld": "Hello, World!",
+  "@helloWorld": {
+    "description": "The conventional newborn programmer greeting"
+  }
+}

example/lib/l10n/arb/messages_es.arb

@@ -0,0 +1,4 @@
+{
+  "@@locale": "es",
+  "helloWorld": "¡Hola Mundo!"
+}

example/lib/l10n/arb/messages_lt.arb

@@ -0,0 +1,4 @@
+{
+  "@@locale": "lt",
+  "helloWorld": "Sveikas, Pasauli!"
+}

example/lib/l10n/l10n.dart

@@ -0,0 +1,10 @@
+// ignore_for_file: depend_on_referenced_packages
+
+import 'package:flutter/widgets.dart';
+
+import 'package:flutter_gen/gen_l10n/app_localizations.dart';
+export 'package:flutter_gen/gen_l10n/app_localizations.dart';
+
+extension AppLocalizationsX on BuildContext {
+  AppLocalizations get l10n => AppLocalizations.of(this)!;
+}

example/lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_deck/flutter_deck.dart';
+import 'package:flutter_deck_example/l10n/l10n.dart';
 import 'package:flutter_deck_example/slides/slides.dart';
 
 void main() {
@@ -96,6 +97,7 @@ class FlutterDeckExample extends StatelessWidget {
         MarkerSlide(),
         ThemingSlide(),
         BackgroundSlide(),
+        LocalizationSlide(),
         TransitionsSlide(),
         StepsSlide(),
         CodeHighlightSlide(),
@@ -108,6 +110,9 @@ class FlutterDeckExample extends StatelessWidget {
         socialHandle: 'flutter_deck',
         imagePath: 'assets/flutter_logo.png',
       ),
+      locale: const Locale('en'),
+      localizationsDelegates: AppLocalizations.localizationsDelegates,
+      supportedLocales: AppLocalizations.supportedLocales,
     );
   }
 }

example/lib/slides/localization_slide.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_deck/flutter_deck.dart';
+import 'package:flutter_deck_example/l10n/l10n.dart';
+
+class LocalizationSlide extends FlutterDeckSlideWidget {
+  const LocalizationSlide()
+      : super(
+          configuration: const FlutterDeckSlideConfiguration(
+            route: '/localization',
+            header: FlutterDeckHeaderConfiguration(
+              title: 'Slide deck localization',
+            ),
+          ),
+        );
+
+  @override
+  FlutterDeckSlide build(BuildContext context) {
+    final locale = context.l10n.localeName;
+
+    return FlutterDeckSlide.blank(
+      builder: (context) => Center(
+        child: Column(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Text(
+              context.l10n.helloWorld,
+              style: FlutterDeckTheme.of(context).textTheme.display,
+            ),
+            const SizedBox(height: 32),
+            Text(
+              'Current locale: $locale',
+              style: FlutterDeckTheme.of(context).textTheme.bodyLarge,
+            ),
+            const SizedBox(height: 32),
+            Text(
+              'It is possible to localize your slide deck using the same '
+              'approach as any other Flutter app.\nUse deck controls to change '
+              'the locale and see the text change without restarting your '
+              'presentation!',
+              style: FlutterDeckTheme.of(context).textTheme.bodyMedium,
+              textAlign: TextAlign.center,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/slides/slides.dart

@@ -8,6 +8,7 @@ export 'footer_slide.dart';
 export 'hidden_slide.dart';
 export 'image_slide.dart';
 export 'layout_structure_slide.dart';
+export 'localization_slide.dart';
 export 'marker_slide.dart';
 export 'quote_slide.dart';
 export 'split_slide.dart';

example/macos/Runner.xcodeproj/project.pbxproj

@@ -227,7 +227,7 @@
 			isa = PBXProject;
 			attributes = {
 				LastSwiftUpdateCheck = 0920;
-				LastUpgradeCheck = 1430;
+				LastUpgradeCheck = 1510;
 				ORGANIZATIONNAME = "";
 				TargetAttributes = {
 					331C80D4294CF70F00263BE5 = {

example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <Scheme
-   LastUpgradeVersion = "1430"
+   LastUpgradeVersion = "1510"
    version = "1.3">
    <BuildAction
       parallelizeBuildables = "YES"

example/pubspec.yaml

@@ -14,13 +14,17 @@ dependencies:
   cupertino_icons: ^1.0.2
   flutter_deck:
     path: ..
+  flutter_localizations:
+    sdk: flutter
+  intl: ^0.18.1
 
 dev_dependencies:
   flutter_test:
     sdk: flutter
   flutter_lints: ^2.0.0
 
 flutter:
+  generate: true
   uses-material-design: true
 
   assets:

lib/src/controls/controls.dart

@@ -4,3 +4,4 @@ export 'flutter_deck_controls_configuration.dart';
 export 'flutter_deck_controls_listener.dart';
 export 'flutter_deck_controls_notifier.dart';
 export 'fullscreen/fullscreen.dart';
+export 'l10n/l10n.dart';