Live

Reactive, adaptive and responsive Flutter UI components and commonly used widgets to help you consistently theme and manage state across your app.

Reactivity

---

Use LiveValue and LiveView to make your widgets react to state changes. LiveValue depends on Live and LiveValue from [https://pub.dev/packages/structures](structures) package.

// counter app with live view
class MyCounter extends StatelessWidget {
  final LiveValue<int> _count = LiveValue(0);


  Widget build(BuildContext context) {
    return Column(
        children: [
          LiveView<int>(
            live: _count,
            builder: (BuildContext context, int count, Widget child) {
              return Row(
                  children: [
                    child,
                    Text("${count}"),
                  ]
              );
            },

            /// specify a child that you dont want rebuilt
            child: Text("Current Count: "),
          ),
          IconButton(
            icon: const Icon(Icons.plus),
            onPressed: () {
              _count.update(count + 1);
            },
          ),
          IconButton(
            icon: const Icon(Icons.plus),
            onPressed: () {
              _count.update(count + 2);
            },
          ),
        ]
    );
  }
}

Responsiveness & Adaptive

---

BuildContext extension with adapters and easy-access properties that include :

• screen size
• orientation
• platform breakpoint
• adapter transformer functions
• theme

Your app will react to all/any of that when they change.

// counter app with live view
class MyCounter extends StatelessWidget {


  Widget build(final BuildContext context) {
    return Column(
        children: [
          Text("ScreenWidth: ${context.width}, ScreenHeight: ${context.height}"),
          context.adapt(
            phone: context.orient(landscape: Text("Phone on landscape!"), portrait: Text("Phone on portrait")),
            // phone(small:,medium:,large:,)
            tablet: context.tablet(small: Text("Small tablet!"), large: Text("tablet Large!")),
            desktop: Text("On Desktop!"), // desktop(small:,medium:,large:,)
          ),
          context.platform(
            web: Text("We are on web"),
            android: Text("we are on android"),
            // linux,macOS,chromeOS,mobile,desktop,+more
          )
          
          
        ]
    );
  }
}

LiveTheme

Simplifies the consistent use of colour, shape, typography, iconography and backgrounds throughout your app, In accordance with material 3 design guidelines. Here is what you define.

Typography - The material type scale with 13 styles. (Type system). Colour - A material colour scheme with 13 colours for different uses (Colour scheme). Iconography - Define the types of icons you use (dual-tone, solid, regular, light, then, outlined) & size Shape - Material shape-scheme defining style for the 7 categories of shape (None, Extra small, Small, Medium, Large, Extra large, Full ). See shape Scheme Backgrounds - Images are not just used as content, some images such as backgrounds, wallpapers are there to only convey brand identity.

LiveTheme summerTheme = LiveTheme(
  id: "summer_theme",
  name: 'summer_theme',
  description: "Bright colors for summer season",
  lightColorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xffFFFF00),
      brightness: Brightness.light
  ),
  darkColorScheme: ColorScheme.fromSeed(
      seedColor: const Color(0xffFFFF00),
      brightness: Brightness.dark
  ),
  textTheme: TextTheme(
    displayLarge: TextStyle(
        fontSize: 96,
        fontWeight: FontWeight.w600,
        fontStyle: FontStyle.normal,
        fontFamily: 'Poppins',
        color: Color(0xffFFFFFF)
    ),
    //...
  ),
  shapeScheme: ShapeScheme(
    small: BorderShape(width: 1, radius: 8, family: ShapeFamily.rounded),
    //...
  ),
  iconScheme: const IconScheme(
      type: IconType.dualtone,
      size: 30),
);

LiveTheme winterTheme = /*...*/;


class ThemesService  implements LiveThemeProvider{
  static late Choice< LiveTheme> _themes;
  static late LiveValue<LiveTheme> _currentTheme;

  ThemesService({required final List<LiveTheme> themes, required final String current}) {
    //...
  }

  @override
  Value<LiveTheme> get theme => _currentTheme;

  @override
  Choice< LiveTheme> get themes => _themes;

}
// fully serializable as whole and also all of its components

final  ThemesService themeService = ThemesService(themes: [summerTheme,winterTheme],current: summerTheme.id);

void main() {



  runApp(LiveView(
    live:themeService.theme,
    builder: (final BuildContext context, final LiveTheme value, final Widget? child) {
      return MaterialApp(

        /// comes with adapters for flutter's material (Cupertino,Fluent and Css coming later)
          theme: value.lightTheme,
          darkTheme: value.darkTheme,
          home: Scaffold(
            //...
          )
      );
    },
  ));
}

Getting started

Note: if you wanted just reactivity and are willing to build your own widgets use the structures package.

$ flutter pub get live

Additional information

This package is a set of tools built by Luminucx .inc dev team to enhance the experience developers and encourage them to write clean and efficient code.

Go through it to make sure it is right for use with your project.