When I build the Web using FlexibleSpaceBar and check it on the web, not the tool, it is grayed out

Question

I used FlexibleSpaceBar with flutter web. If I run it in Visual Studio code, it works normally. However, when I build it on the web and check it, the widget is grayed out as shown in the picture.

Android and IOS builds are working fine. It is the same when building and deploying firebase hosting and running the simulator.

Any other workarounds for the web?

Advice from seniors please.

[✓] Flutter (Channel stable, 2.2.2, on Mac OS X 10.15.7 19H2 darwin-x64, locale ko-KR)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

[✓] Xcode - develop for iOS and macOS

[✓] Chrome - develop for the web

[✓] Android Studio (version 4.1)

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Test(),
    );
  }
}

class Test extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: DefaultTabController(
        length: 2,
        child: NestedScrollView(
          headerSliverBuilder: (context, value) {
            return [
              SliverAppBar(
                floating: true,
                pinned: true,
                bottom: TabBar(
                  tabs: [
                    Tab(text: "Posts"),
                    Tab(text: "Likes"),
                  ],
                ),
                expandedHeight: 450,
                flexibleSpace: FlexibleSpaceBar(
                  collapseMode: CollapseMode.pin,
                  background: Container(
                    color: Colors.purple,
                    height: 300,
                  ), // This is where you build the profile part
                ),
              ),
            ];
          },
          body: TabBarView(
            children: [
              Container(
                child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Container(
                      height: 40,
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('List Item $index'),
                    );
                  },
                ),
              ),
              Container(
                child: ListView.builder(
                  itemCount: 100,
                  itemBuilder: (context, index) {
                    return Container(
                      height: 40,
                      alignment: Alignment.center,
                      color: Colors.lightBlue[100 * (index % 9)],
                      child: Text('List Item $index'),
                    );
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

score 0 · Answer 1 · answered Aug 01 '21 at 10:20

0

If you look into debug console while running in VScode, it'll show you an error. Probably something like incorrect use of parent widget.

These errors in release mode, as in your case when you built the app for web then deployed it, show up as grey boxes. In general, flutter UI\renderFlex errors show up as grey spaces when the app is not in debug mode.

answered Aug 01 '21 at 10:20

Huthaifa Muayyad

11,321
3
17
49

I'll check. Thank you for answer – Dongpyo Lee Aug 01 '21 at 10:52
I created a new project and tested it. In Visual Studio code, it works normally without any errors. But when I build and deploy it, the output is still grayed out. – Dongpyo Lee Aug 01 '21 at 11:16
Run your project using `flutter run --release` see what happens – Huthaifa Muayyad Aug 01 '21 at 12:24
There are no messages in the tunnel. Release runs are also grayed out. What should I run into a release and look at? – Dongpyo Lee Aug 01 '21 at 12:33
https://github.com/flutter/flutter/issues/85136#:~:text=commented-,13%20days%20ago,-%E2%80%A2 – Huthaifa Muayyad Aug 01 '21 at 15:35

When I build the Web using FlexibleSpaceBar and check it on the web, not the tool, it is grayed out

1 Answers1

Linked