live

Description:

live

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);
},
),
]
);
}
}

copied to clipboard
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
)


]
);
}
}

copied to clipboard
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(
//...
)
);
},
));
}

copied to clipboard
Getting started #
Note: if you wanted just reactivity and are willing to build your own widgets use the structures package.
$ flutter pub get live
copied to clipboard
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.