CODEWITHSUNDEEP
flutter
apieceofcode1801
apieceofcode1801

Reputation: 341

Flutter - The const widget still rebuild when its parent rebuild

I have a question about when and how a const widget will rebuild.

For example, I have a demo project like this:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const Center(
          child: MyStatefulWidget(),
        ),
      ),
    );
  }
}

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  bool isChecked = false;

  @override
  Widget build(BuildContext context) {
    const child = ChildWidget();
    return OrientationBuilder(
      builder: (context, orientation) {
        debugPrint('$orientation');
        final isPortrait = orientation == Orientation.portrait;
        return Container(
          alignment: Alignment.topCenter,
          child: isPortrait
              ? Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: const [
                      SizedBox(height: 200, child: child),
                      Text('Bellow text'),
                    ])
              : child,
        );
      },
    );
  }
}


class ChildWidget extends StatefulWidget {
  const ChildWidget({Key? key}) : super(key: key);

  @override
  State<ChildWidget> createState() => _ChildWidgetState();
}

class _ChildWidgetState extends State<ChildWidget> {
  int _counter = 0;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _counter += 1;
        });
      },
      child: Container(
          color: Colors.blue, child: Center(child: Text('$_counter'))),
    );
  }
}

As you see, I have a const ChildWidget. const child = ChildWidget();

When I rotate the device, it will trigger the builder function of the OrientationBuilder and return a new Container. But my question is why the child widget is rebuilt again while it is a const.

The reason why I want the child widget is not rebuilt is that I don't want the counter Text to reset to 0 each time I rotate the device.

Please advice.

Thanks a lot.

Upvotes: 0

Views: 1607

Answers (1)

TmKVU
TmKVU

Reputation: 3000

While the variable and object assigned are constant, the framework will still call the build method on the child widgets. So the actual ChildWidget class is not recreated, but the build will be called.

This is not really a problem. Flutter is really optimized for rebuilding Widgets. If the data has not changed, the actual cost of rebuilding is negligible.

Upvotes: 1

Related Questions