Lokalise Flutter SDK and working with over-the-air flow

flutter create to_do_app

dependencies:
  flutter:
    sdk: flutter
  flutter_localizations:        # <---
    sdk: flutter                # <---
  intl: any                     # <---
  lokalise_flutter_sdk: ^1.0.0  # <---

flutter pub get

{
    "@@locale": "en",
    "@@last_modified": "2022-10-05T18:53:09+02:00",
    "title": "ToDo App",
    "list_title": "Todo list",
    "addButton": "Add Item",
    "title_addItem": "Add a new todo item",
    "hint_addItem": "Type your new todo",
    "button_addItem": "Add",
    "total_todo": "Total tasks: {count}",
    "pending_todo": "{count, plural, zero {You don't have pending tasks} one {You have just one pending task} other {You have {count} pending tasks}}",
    "completed_todo": "{count, plural, zero {You don't have completed tasks} one {You have just one completed task} other {You have {count} completed tasks}}"
}

{
    "@@locale": "es",
    "@@last_modified": "2022-10-05T18:53:09+02:00",
    "title": "aplicación ToDo",
    "list_title": "Lista de tareas",
    "addButton": "Añadir tarea",
    "title_addItem": "Añada una nueva tarea",
    "hint_addItem": "Escriba aqui su nueva tarea",
    "button_addItem": "Añadir",
    "total_todo": "Tareas totales: {count}",
    "pending_todo": "{count, plural, zero {No tienes tareas pendientes} one {Tienes una tarea pendiente} other {Tiene {count} tareas pendientes}}",
    "completed_todo": "{count, plural, zero {No tienes tareas completadas} one {Tienes solo una tarea completada} other {Tienes {count} tareas completadas}}"
}

dart run lokalise_flutter_sdk:gen-lok-l10n

import 'package:flutter/material.dart';
import 'package:lokalise_flutter_sdk/lokalise_flutter_sdk.dart';
import 'package:to_do_app/app/app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Lokalise.init(
    sdkToken: 'YOUR_SDK_TOKEN', // <--- 1
    projectId: '', // <--- 2
    preRelease: false, // <--- 3
    appVersion: "0", // <--- 4
  );
  runApp(const App());
}

import 'package:flutter/material.dart';
import 'package:to_do_app/app/views/screens/todo_screen/todo_screen.dart';
import 'package:to_do_app/l10n/generated/l10n.dart';

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      onGenerateTitle: (context) => Lt.of(context).title,
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      localizationsDelegates: Lt.localizationsDelegates,
      supportedLocales: Lt.supportedLocales,
      home: TodoScreen(),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:lokalise_flutter_sdk/lokalise_flutter_sdk.dart';
import 'package:to_do_app/app/models/todo_model.dart';
import 'package:to_do_app/app/views/custom_widgets/loading.dart';
import 'package:to_do_app/app/views/screens/todo_screen/widgets/add_todo_button.dart';
import 'package:to_do_app/app/views/screens/todo_screen/widgets/todo_section.dart';
import 'package:to_do_app/l10n/generated/l10n.dart';

class TodoScreen extends StatefulWidget {
  final List<TodoModel> _todos = [];

  TodoScreen({super.key});

  @override
  State<TodoScreen> createState() => _TodoScreen();
}

class _TodoScreen extends State<TodoScreen> {
  bool _isLoading = true;

  @override
  void initState() {
    super.initState();
    Lokalise.instance.update().then( // <---------------------
          (response) => setState(() => _isLoading = false),
          onError: (error) => setState(() => _isLoading = false),
        );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(Lt.of(context).list_title)),
      floatingActionButton: AddTodoButton(onAddPress: _onAddTodo),
      body: _isLoading
          ? const Loading()
          : SafeArea(
              child: _buildBody(context),
            ),
    );
  }

  Widget _buildBody(BuildContext context) {
    final completed = widget._todos.where((e) => e.completed).toList();
    final pending = widget._todos.where((e) => !e.completed).toList();

    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 20),
      child: Column(
        mainAxisSize: MainAxisSize.max,
        children: [
          Text(
            Lt.of(context).total_todo(widget._todos.length),
            style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
          ),
          const SizedBox(height: 15),
          Flexible(
            child: TodoSection(
              title: Lt.of(context).pending_todo(pending.length), // <--------
              todos: pending,
              onTodoPress: _onTodoPress,
            ),
          ),
          const SizedBox(height: 10),
          Flexible(
            child: TodoSection(
              title: Lt.of(context).completed_todo(completed.length),
              todos: completed,
              onTodoPress: _onTodoPress,
            ),
          ),
        ],
      ),
    );
  }

  void _onAddTodo(TodoModel todo) => setState(() => widget._todos.add(todo));

  void _onTodoPress(TodoModel todo) =>
      setState(() => todo.completed = !todo.completed);
}

import 'package:flutter/material.dart';
import 'package:to_do_app/app/models/todo_model.dart';
import 'package:to_do_app/l10n/generated/l10n.dart';

class AddTodoButton extends StatelessWidget {
  final Function(TodoModel model) _onAddPress;

  const AddTodoButton({
    super.key,
    required Function(TodoModel model) onAddPress,
  }) : _onAddPress = onAddPress;

  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      tooltip: Lt.of(context).addButton,
      child: const Icon(Icons.add),
      onPressed: () => showDialog(
        context: context,
        builder: (_) => _AddTodoDialog(callback: _onAddPress),
      ),
    );
  }
}

class _AddTodoDialog extends StatelessWidget {
  final TextEditingController _textFieldController = TextEditingController();
  final Function(TodoModel model) _callback;

  _AddTodoDialog({required Function(TodoModel model) callback})
      : _callback = callback;

  @override
  Widget build(BuildContext context) {
    return AlertDialog(
      title: Text(Lt.of(context).title_addItem),
      content: TextField(
        controller: _textFieldController,
        decoration: InputDecoration(hintText: Lt.of(context).hint_addItem),
      ),
      actions: [
        TextButton(
          onPressed: _createTodo(context),
          child: Text(Lt.of(context).button_addItem),
        ),
      ],
    );
  }

  void Function() _createTodo(BuildContext context) => () {
        final input = _textFieldController.text.trim();
        if (input.isEmpty) {
          return;
        }

        Navigator.of(context).pop();
        _callback(TodoModel(title: input));
      };
}

import 'package:flutter/material.dart';
import 'package:to_do_app/app/models/todo_model.dart';

class TodoRow extends StatelessWidget {
  final TodoModel _todo;
  final Function(TodoModel model) _onTodoPress;

  const TodoRow({
    super.key,
    required TodoModel todo,
    required Function(TodoModel model) onTodoPress,
  })  : _todo = todo,
        _onTodoPress = onTodoPress;

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(
        _todo.title,
        style: _getTextStyle(_todo.completed),
      ),
      leading: CircleAvatar(child: Text(_todo.title[0])),
      onTap: () => _onTodoPress(_todo),
    );
  }

  TextStyle? _getTextStyle(bool checked) => !checked
      ? null
      : const TextStyle(
          color: Colors.black54,
          decoration: TextDecoration.lineThrough,
        );
}

import 'package:flutter/material.dart';
import 'package:to_do_app/app/models/todo_model.dart';
import 'package:to_do_app/app/views/screens/todo_screen/widgets/todo_row.dart';

class TodoSection extends StatelessWidget {
  final String _title;
  final List<TodoModel> _todos;
  final Function(TodoModel model) _onTodoPress;

  const TodoSection({
    super.key,
    required String title,
    required List<TodoModel> todos,
    required Function(TodoModel model) onTodoPress,
  })  : _title = title,
        _todos = todos,
        _onTodoPress = onTodoPress;

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        _buildTitle(),
        Expanded(child: _buildList()),
      ],
    );
  }

  Widget _buildTitle() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8),
      child: Text(
        _title,
        style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w600),
      ),
    );
  }

  Widget _buildList() {
    return Container(
      margin: const EdgeInsets.symmetric(vertical: 10),
      decoration: _listContainerDecoration(),
      child: ListView(
        children: _todos
            .map((e) => TodoRow(todo: e, onTodoPress: _onTodoPress))
            .toList(),
      ),
    );
  }

  BoxDecoration _listContainerDecoration() {
    return BoxDecoration(
      border: Border.all(width: 1, color: Colors.grey),
      borderRadius: BorderRadius.circular(15),
      boxShadow: [
        BoxShadow(color: Colors.grey.shade100, spreadRadius: 5, blurRadius: 7),
      ],
    );
  }
}

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const IgnorePointer(
      child: Center(
        child: CircularProgressIndicator(),
      ),
    );
  }
}

class TodoModel {
  final String title;
  bool completed;

  TodoModel({required this.title}) : completed = false;
}