Created
December 18, 2021 14:25
-
-
Save definev/94455f0a19cc5e09601ae94b7249ff41 to your computer and use it in GitHub Desktop.
Nested widget POC
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
import 'package:flutter_riverpod/flutter_riverpod.dart'; | |
final textValueProvider = StateProvider<String>((_) => "OPT_1"); | |
final isNestedProvider = StateProvider<bool>((_) => false); | |
void main() { | |
runApp(ProviderScope(child: MyApp())); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: 'Flutter Demo', | |
debugShowCheckedModeBanner: false, | |
theme: ThemeData( | |
primarySwatch: Colors.blue, | |
), | |
home: MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends ConsumerWidget { | |
void changeMode(StateController<bool> isNestedController) { | |
isNestedController.state = !isNestedController.state; | |
} | |
void changeText(StateController<String> textController) { | |
textController.state = "Rebuilt!!!"; | |
} | |
Widget _nestedOption() { | |
return NestedWidget( | |
children: [ | |
(child) { | |
print("Nested widget rebuilt!"); | |
return Padding( | |
padding: const EdgeInsets.all(1), | |
child: child, | |
); | |
} | |
], | |
child: Consumer(builder: (context, ref, _) { | |
final text = ref.watch(textValueProvider); | |
return Text(text); | |
}), | |
); | |
} | |
Widget _normalOption() { | |
return CustomPaddingForLog( | |
child: Consumer(builder: (context, ref, _) { | |
final text = ref.watch(textValueProvider); | |
return Text(text); | |
}), | |
); | |
} | |
@override | |
Widget build(BuildContext context, WidgetRef ref) { | |
final isNested = ref.watch(isNestedProvider); | |
final isNestedController = ref.read(isNestedProvider.notifier); | |
final textController = ref.read(textValueProvider.notifier); | |
print("PARENT WIDGET!!!!!"); | |
return Scaffold( | |
appBar: AppBar( | |
title: const Text("NESTED TEST"), | |
), | |
body: Column( | |
children: [ | |
Expanded( | |
child: isNested ? _nestedOption() : _normalOption(), | |
), | |
Row( | |
children: [ | |
ElevatedButton( | |
onPressed: () => changeText(textController), | |
child: const Text("Rebuilt"), | |
), | |
ElevatedButton( | |
onPressed: () => changeMode(isNestedController), | |
child: const Text("Change mode"), | |
), | |
], | |
), | |
], | |
), | |
); | |
} | |
} | |
class CustomPaddingForLog extends StatelessWidget { | |
const CustomPaddingForLog({required this.child}); | |
final Widget child; | |
@override | |
Widget build(BuildContext context) { | |
print("Rebuilt in normal"); | |
return Padding( | |
padding: const EdgeInsets.all(1), | |
child: child, | |
); | |
} | |
} | |
typedef SingleChildWidgetConstructor = Widget Function(Widget child); | |
class NestedWidget extends StatelessWidget { | |
const NestedWidget({ | |
Key? key, | |
required this.children, | |
required this.child, | |
}) : super(key: key); | |
final List<SingleChildWidgetConstructor> children; | |
final Widget child; | |
@override | |
Widget build(BuildContext context) { | |
Widget nestedChild = child; | |
for (final constructor in children.reversed) { | |
return constructor(nestedChild); | |
} | |
return nestedChild; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment