lenra_client 1.2.0

Create your Flutter application with a Lenra backend. Add a LenraApplication at the base of your app and you can use the LenraView widget in your app.

Lenra's Flutter client lib

Let you create your Flutter application with Lenra backend.

Report Bug · Request Feature

Prerequisites

Add the dependency to your project:

flutter pub add lenra_client

You might need some other prerequisites since this lib is still in using flutter_secure_storage. Look at this lib documentation to see what you need.

(back to top)

Usage

Add a LenraApplication to your app:

import 'package:flutter/material.dart';
import 'package:lenra_client/widgets.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: LenraApplication(
        // set your own client id for production
        clientId: 'XXX-XXX-XXX',
        child: const MyHomePage(title: 'Flutter Demo Home Page'),
      ),
    );
  }
}

This while automatically start the authentication flow.

You can then add LenraView instances to your widget tree to link the widget to a Lenra view and use it data:

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return LenraView(
      route: "/counter/me",
      builder: (
        BuildContext context,
        Map<String, dynamic> json,
        ListenerCaller callListener,
      ) =>
          Scaffold(
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(title),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                'You have pushed the button this many times:',
              ),
              Text(
                '${json["value"]}',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () => callListener(json["onIncrement"]),
          tooltip: 'Increment',
          child: const Icon(Icons.add),
        ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
      loader: const CircularProgressIndicator(),
    );
  }
}

For the web target, you also have to add the following JavaScript to a redirect file (default to redirect.html) to handle OAuth2 redirection (see the example):

window.onload = function() {
  window.opener.postMessage(window.location.href, `${window.location.protocol}//${window.location.host}`);
}

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please open an issue with the tag "enhancement". Don't forget to give the project a star if you liked it! Thanks again!

(back to top)

License

Distributed under the MIT License. See LICENSE for more information.

(back to top)

Contact

Lenra - @lenra_dev - [e-mail]

Project Link: https://github.com/lenra-io/client-lib-flutter

(back to top)