Custom Scaffold class not draw the AppBar

Question

I'm trying to create a custom Scaffold extending the original class. With a default AppBar if not passed a new one.

class CommonScaffold extends Scaffold {
  final AppBar? appBar;
  final Widget body;

  CommonScaffold({
    Key? key,
    this.appBar,
    required this.body,
  }) : super(
    key: key,
    body: body,
    appBar: appBar ??
        AppBar(
          title: const Text("Default Text"),
        ),
  );
}

If I call the class avoiding pass the appBar parameter the AppBar will not appear. But should appear.

@override
  Widget build(BuildContext context) {
    return CommonScaffold(
      body: _createContent(),
    );
  }

If I call the class passing an AppBar to the appBar parameter the AppBar will appear.

@override
  Widget build(BuildContext context) {
    return CommonScaffold(
      body: _createContent(),
      appBar: AppBar(
          title: const Text("TEST"),
      ),
    );
  }

Md. Yeasin Sheikh · Accepted Answer · 2021-12-15T14:28:35.540

The issue is here we are having two appBar and body for CommonScaffold. First set is coming because of extends Scaffold and second set is by declaring two on CommonScaffold.

You can check how it works on OOP by running this snippet. On dartPad. I'm changing names for better understanding the concept.

class Super {
  final int? a;
  final int? b;

  const Super({this.a, this.b});
}

class Common extends Super {
  final int? ca;
  final int b;

  const Common({this.ca, required this.b}) : super(a: ca ?? 10, b: b);
}

void main() {
  final c = Common(b: 1);
  print("supper a: ${c.a}"); // 10:  will refer supper class 
  print("Common a: ${c.ca}"); // null:  will refer common class 
}

Now for your answer, It will be better to change attributes name of CommonScaffold to avoid conflicting with super class.

Here is the answer on dartPad


class CommonScaffold extends Scaffold {
  final AppBar? cAppBar;

  final Widget? cBody;

  CommonScaffold({
    Key? key,
    this.cAppBar,
    this.cBody,
  }) : super(
            key: key,
            body: cBody,
            appBar: cAppBar ??
                AppBar(
                  title: Text("Default Appbar"),
                ));
}

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

  @override
  Widget build(BuildContext context) {
    return CommonScaffold(
      cBody: Text("body"),
    );
  }
}

score 0 · Answer 2 · answered Dec 15 '21 at 13:33

if you only want to show or not the appBar you can use this example by modifying the value of the bool to show or not the bar

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: (showAppbar)? AppBar(
          title: const Text("Default Text"),
        ): AppBar(
          title: const Text("TEST"),
      ),
      body: Center(
        child: Text(
          'Hello, a!',
        ),
      ),
    );
  }

Custom Scaffold class not draw the AppBar

2 Answers2