Entire UI rebuild

[officeprj]

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

[FilledStacks]

1. set reactive for HomeView to false .
2. Create a new stateless widget for the UI you want to rebuild
3. Change StatelessWidget to ViewModelWidget<HomeViewModel>
4. Only the new widget will rebuild and the HomeView won't rebuilt

[nowfalsalahudeen]

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?