Entire UI rebuild
Describe the bug
When the viewmodel value changes is the entire UI rebuild? If so how we can prevent that? In the example below if counter values changes then the widget which is using the counter value should only rebuild instead of entire UI
To reproduce
import 'package:flutter/material.dart'; import 'package:stacked/stacked.dart'; import 'package:counter_app/ui/common/app_colors.dart'; import 'package:counter_app/ui/common/ui_helpers.dart';
import 'home_viewmodel.dart';
class HomeView extends StackedView<HomeViewModel> { const HomeView({Key? key}) : super(key: key);
@override Widget builder( BuildContext context, HomeViewModel viewModel, Widget? child, ) {
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Center(
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
verticalSpaceLarge,
Column(
children: [
const Text(
'Hello, STACKED!',
style: TextStyle(
fontSize: 35,
fontWeight: FontWeight.w900,
),
),
verticalSpaceMedium,
MaterialButton(
color: Colors.black,
onPressed: viewModel.incrementCounter,
child: Text(
viewModel.counterLabel,
style: const TextStyle(color: Colors.white),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
MaterialButton(
color: kcDarkGreyColor,
onPressed: viewModel.showDialog,
child: const Text(
'Show Dialog',
style: TextStyle(
color: Colors.white,
),
),
),
MaterialButton(
color: kcDarkGreyColor,
onPressed: viewModel.showBottomSheet,
child: const Text(
'Show Bottom Sheet',
style: TextStyle(
color: Colors.white,
),
),
),
],
)
],
),
),
),
),
);
}
@override HomeViewModel viewModelBuilder( BuildContext context, ) => HomeViewModel(); }
HomeViewModel
import 'package:counter_app/app/app.bottomsheets.dart'; import 'package:counter_app/app/app.dialogs.dart'; import 'package:counter_app/app/app.locator.dart'; import 'package:counter_app/ui/common/app_strings.dart'; import 'package:stacked/stacked.dart'; import 'package:stacked_services/stacked_services.dart';
class HomeViewModel extends BaseViewModel { final _dialogService = locator<DialogService>(); final _bottomSheetService = locator<BottomSheetService>();
String get counterLabel => 'Counter is: $_counter';
int _counter = 0;
void incrementCounter() { _counter++; rebuildUi(); }
void showDialog() { _dialogService.showCustomDialog( variant: DialogType.infoAlert, title: 'Stacked Rocks!', description: 'Give stacked $_counter stars on Github', ); }
void showBottomSheet() { _bottomSheetService.showCustomSheet( variant: BottomSheetType.notice, title: ksHomeBottomSheetTitle, description: ksHomeBottomSheetDescription, ); } }
Expected behavior
No response
Screenshots
No response
Additional Context
No response
- set reactive for
HomeViewtofalse. - Create a new stateless widget for the UI you want to rebuild
- Change
StatelessWidgettoViewModelWidget<HomeViewModel> - Only the new widget will rebuild and the HomeView won't rebuilt
Create a new stateless widget for the UI you want to rebuild
this step needs some additional work, is there any simple widget wrapper or builder available, like Consumer or Obx?
@officeprj Please close the issue, if you got the answer.