jolt_flutter 0.0.3+1
jolt_flutter: ^0.0.3+1 copied to clipboard
A Flutter extension of jolt that provides reactive UI support, enabling automatic synchronization between state and interface.
example/jolt_flutter_example.dart
import 'package:flutter/material.dart';
import 'package:jolt_flutter/jolt_flutter.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
final Brightness brightness = Brightness.light;
@override
Widget build(BuildContext context) {
final textTheme = Theme.of(context).textTheme;
return JoltResource(
create: (context) {
final brightness = Signal(Brightness.light);
final counter = Signal(0);
final doubleCount = Computed(() => counter.value * 2);
int increment() => counter.value++;
int decrement() => counter.value--;
return (
brightness: brightness,
counter: counter,
doubleCount: doubleCount,
increment: increment,
decrement: decrement,
);
},
builder: (context, store) {
return MaterialApp(
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
themeMode: store.brightness.value == Brightness.dark
? ThemeMode.dark
: ThemeMode.light,
home: Scaffold(
body: DefaultTextStyle(
style: textTheme.displayMedium!.copyWith(
color: store.brightness.value == Brightness.dark
? Colors.white
: Colors.black,
),
child: Center(
child: JoltResource(
create: (context) {
final lastCounter = Signal(0);
Watcher(() => store.doubleCount.value, (_, oldValue) {
lastCounter.value = oldValue;
});
return lastCounter;
},
builder: (context, lastCounter) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
spacing: 8,
children: [
Text('counter: ${store.counter.value}'),
Text('doubleCount: ${store.doubleCount.value}'),
Text('lastDoubleCounter: ${lastCounter.value}'),
],
);
},
),
),
),
floatingActionButton: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
FloatingActionButton(
onPressed: () {
store.brightness.value =
store.brightness.value == Brightness.light
? Brightness.dark
: Brightness.light;
},
child: store.brightness.value == Brightness.light
? Icon(Icons.brightness_2)
: Icon(Icons.brightness_7),
),
const SizedBox(height: 8),
FloatingActionButton(
onPressed: store.increment,
child: const Icon(Icons.add),
),
const SizedBox(height: 8),
FloatingActionButton(
onPressed: store.decrement,
child: const Icon(Icons.remove),
),
],
),
),
);
},
);
}
}