Entire UI rebuild
officeprj opened this issue · 2 comments
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 {
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();
final _bottomSheetService = locator();
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
HomeView
tofalse
. - Create a new stateless widget for the UI you want to rebuild
- Change
StatelessWidget
toViewModelWidget<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?