stacked icon indicating copy to clipboard operation
stacked copied to clipboard

Entire UI rebuild

Open officeprj opened this issue 2 years ago • 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<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

officeprj avatar Nov 26 '23 06:11 officeprj

  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

FilledStacks avatar Nov 28 '23 09:11 FilledStacks

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?

nowfalsalahudeen avatar Jul 05 '24 05:07 nowfalsalahudeen

@officeprj Please close the issue, if you got the answer.

MDSADABWASIM avatar Oct 01 '24 05:10 MDSADABWASIM