headerBuilder in PhoneInputScreen does not work on web

[amin79]

Bug report

Describe the bug headerBuiler in PhoneInputScreen does not work on web.

It works in IOS and Android but nor Web

Sample project

    return Scaffold(
      appBar: transparentAppBar(context),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: kIsWeb ? 60 : 10),
        child: PhoneInputScreen(
          actions: [
            SMSCodeRequestedAction((context, action, flowKey, phoneNumber) {
              Navigator.of(context).push(
                MaterialPageRoute(
                  builder: (context) => SMSCodeInputScreen(
                    flowKey: flowKey,
                  ),
                ),
              );
            }),
          ],
          //headerMaxExtent: 200.h,          
          headerBuilder: (context, constraints, shrinkOffset) {
            return Text("Hello");           
          },
        ),
      ),
    );
  }

[darshankawar]

@amin79 Can you elaborate when you say not working on web ? What's the expected behavior ? Can you provide flutter doctor -v and complete minimal code sample that shows the behavior ?

[amin79]

@darshankawar sorry for that. Actually I tested more and I found out that headerBuilder shows nothing nor on web or mobile is sign in with phone screen. As you see I put a Text("Hello") but when I run the app, it just shows in Sign in and register with email screens. It means when I click on "sign in with phone", the header is empty.

And here the result of flutter doctors -v :

[✓] Flutter (Channel stable, 3.7.12, on macOS 13.2.1 22D68 darwin-x64, locale en-DE) • Flutter version 3.7.12 on channel stable at /Users/aminseraji/Development/flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 4d9e56e694 (2 weeks ago), 2023-04-17 21:47:46 -0400 • Engine revision 1a65d409c7 • Dart version 2.19.6 • DevTools version 2.20.1

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0) • Android SDK at /Users/aminseraji/Library/Android/sdk • Platform android-33, build-tools 31.0.0 • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165) • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.3) • Xcode at /Applications/Xcode.app/Contents/Developer • Build 14E222b • CocoaPods version 1.11.3

[✓] Chrome - develop for the web • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3) • Android Studio at /Applications/Android Studio.app/Contents • Flutter plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: 🔨 https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] VS Code (version 1.77.3) • VS Code at /Applications/Visual Studio Code.app/Contents • Flutter extension version 3.62.0

[✓] Connected device (3 available) • iPhone 14 Pro Max (mobile) • 7518BB64-56CF-44CF-9B22-D41FA144865C • ios • com.apple.CoreSimulator.SimRuntime.iOS-16-4 (simulator) • macOS (desktop) • macos • darwin-x64 • macOS 13.2.1 22D68 darwin-x64 • Chrome (web) • chrome • web-javascript • Google Chrome 112.0.5615.137

[✓] HTTP Host Availability • All required HTTP hosts are available

• No issues found!

[darshankawar]

@amin79 Thanks for the update.

appBar: transparentAppBar regarding this, are you using any third party package for transparent app bar ?

Try using the plugin example and see if using it, you get same behavior or have any missing code implementation in your app.

[amin79]

@darshankawar thanks again. I user just a normal appBar there:

AppBar transparentAppBar(BuildContext context,
    {String? title, Widget? actions}) {
  return AppBar(
    title: Text(title ?? ""),
    backgroundColor: Colors.transparent,
    toolbarHeight: kIsWeb ? 100 : null,
    elevation: 0.0,
    foregroundColor: Colors.black,
    iconTheme: const IconThemeData(color: Colors.black54),
    actions: [
      actions ?? Container(),
    ],
  );
}

I also commented out the appBar but again shows nothing. You can just test it and will see that when you click on "Sign in with phone", the Hello text would not be shown.

class LoginScreen extends ConsumerWidget {
  const LoginScreen({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return Scaffold(
      //appBar: transparentAppBar(context),
      body: Padding(
        padding: EdgeInsets.symmetric(horizontal: kIsWeb ? 60 : 10.w),
        child: SignInScreen(
          providers: [EmailAuthProvider(), PhoneAuthProvider()],       
          headerMaxExtent: 200.h,
          headerBuilder: (context, constraints, shrinkOffset) {
            return const Text("Hello");         
          },
        ),
      ),
    );
  }
}

[darshankawar]

Thanks for the update. Using the plugin example and running on web shows below:

/cc @lesnitsky

[amin79]

@darshankawar Thank you for your work :) Just need to mention that the problem is not just in web. I tested it also on mobile and it did not work as well.

[lesnitsky]

headerBuilder is only called on mobile layouts (narrow and tall screens),sideBuilder is called on tablet/desktop layouts. This is by design. If you want more customisations you can use LoginView and have everything else around it custom.