Skip to content

Instantly share code, notes, and snippets.

@ultraon
Created December 2, 2024 21:20
Show Gist options
  • Save ultraon/3d39d40f08d79c3c4e9316f127e5d146 to your computer and use it in GitHub Desktop.
Save ultraon/3d39d40f08d79c3c4e9316f127e5d146 to your computer and use it in GitHub Desktop.
The sample shows that the const widget can be skipped by Flutter for rebuilding.
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class DemoPage extends StatelessWidget {
const DemoPage({super.key});
@override
Widget build(BuildContext context) {
return BlocProvider(
create: (ctx) => DependentCounterCubit(),
child: const Scaffold(
body: DemoView(),
),
);
}
}
class DemoView extends StatelessWidget {
const DemoView({super.key});
@override
Widget build(BuildContext context) {
print('DemoView build, $hashCode');
final state = context.watch<DependentCounterCubit>().state;
return Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const CounterText1(),
CounterText2('${state.counterTwo}'),
const SizedBox.square(dimension: 20),
FilledButton(
onPressed: context.read<DependentCounterCubit>().incrementOne,
child: const Text('Increment One'),
),
FilledButton(
onPressed: context.read<DependentCounterCubit>().incrementTwo,
child: const Text('Increment Two'),
),
],
),
);
}
}
// This class is only created for tagging it in the Widget Performance view
class CounterText1 extends StatelessWidget {
const CounterText1({super.key});
@override
Widget build(BuildContext context) {
print('CounterText1 build, $hashCode');
final counterText = context.select(
(DependentCounterCubit c) => c.state.counterOne,
);
return Text(
'Text1: $counterText',
style: Theme.of(context).textTheme.titleLarge,
);
}
}
// This class is only created for tagging it in the Widget Performance view
class CounterText2 extends StatelessWidget {
const CounterText2(this._text, {super.key});
final String _text;
@override
Widget build(BuildContext context) {
print('CounterText2 build, $hashCode');
return Text(
'Text2: $_text',
style: Theme.of(context).textTheme.titleLarge,
);
}
}
// CUBIT SAMPLE
typedef DependentCounterState = ({int counterOne, int counterTwo});
class DependentCounterCubit extends Cubit<DependentCounterState> {
DependentCounterCubit() : super((counterOne: 0, counterTwo: 0));
void incrementOne() {
emit((counterOne: state.counterOne + 1, counterTwo: state.counterTwo));
}
void incrementTwo() {
emit((counterOne: state.counterOne, counterTwo: state.counterTwo + 1));
}
}
@ultraon
Copy link
Author

ultraon commented Dec 2, 2024

!!! PAY ATTENTION !!!

When I click on the "Increment One" button it shows:
Click 1:

DemoView build, 301182698
CounterText1 build, 575811888 // <------------- the instance is the same, but the `build` method is called.
CounterText2 build, 794060487

Click 2:

DemoView build, 301182698
CounterText1 build, 575811888 // <------------- the instance is the same, but the `build` method is called.
CounterText2 build, 569557191

When I click on the "Increment Two" button it shows:
Click 1:

DemoView build, 301182698
// ----------- CounterText1 isn't rebuilt
CounterText2 build, 210843644

Click 2:

DemoView build, 301182698
// ----------- CounterText1 isn't rebuilt
CounterText2 build, 288415978

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment