Flutter web shows a blank screen in build mode

Question

After finishing my web app on flutter I tried to release it on the server by flutter build web command. I uploaded my files to the server but I am getting a blank screen. In the debugging mode on Android Studio, it works fine. I am also getting the same blank screen when I use the command flutter run -d chrome --profile --verbose I found similar questions here but the root cause seems to be different every time and nothing worked for me, can you please advice?

Below is a simplified version of my flutter code, suffering from the same issue:

import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:flutter_signin_button/flutter_signin_button.dart';

void main() {
  WidgetsFlutterBinding.ensureInitialized();
  //await Firebase.initializeApp();
  ErrorWidget.builder = (FlutterErrorDetails details) {
    bool inDebug = false;
    assert(() { inDebug = true; return true; }());
    // In debug mode, use the normal error widget which shows
    // the error message:
    if (inDebug)
      return ErrorWidget(details.exception);
    // In release builds, show a yellow-on-blue message instead:
    return Container(
      alignment: Alignment.center,
      child: Text(
        'Error! ${details.exception}',
        style: TextStyle(color: Colors.yellow),
        textDirection: TextDirection.ltr,
      ),
    );
  };
  // Here we would normally runApp() the root widget, but to demonstrate
  // the error handling we artificially fail:
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
          scrollBehavior: MyCustomScrollBehavior(), //fixing the scrolling for web
          home:LoginScreen(),


          theme: ThemeData(
            cupertinoOverrideTheme: CupertinoThemeData( // <---------- this
              textTheme: CupertinoTextThemeData(
                pickerTextStyle: TextStyle(color: Colors.white, fontWeight: FontWeight.w900),
              ),
            ),

          ),
        );

//
  }
}
class MyCustomScrollBehavior extends MaterialScrollBehavior {
  // Override behavior methods and getters like dragDevices
  @override
  Set<PointerDeviceKind> get dragDevices => {
    PointerDeviceKind.touch,
    PointerDeviceKind.mouse,
    // etc.
  };
}
class LoginScreen extends StatefulWidget {

  @override
  State<LoginScreen> createState() => _LoginScreenState();

}

class _LoginScreenState extends State<LoginScreen> {
  late String em;
  late String pa;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();

  }
  @override
  Widget build(BuildContext context) {
    return Material(
        child: Scaffold(
              body: buildHomeScreen()
          ),
        );
  }

  Widget buildHomeScreen(){
   return Container(
      decoration: BoxDecoration(color: Colors.amberAccent),
      child: Flexible(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Align(alignment: Alignment.centerLeft,
                  child: WelcomeText('Get to know the highest rated cars,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('good and bad things for each car,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('best car mechanics near you,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('best car agencies,')),
              Align(alignment: Alignment.centerLeft,child: WelcomeText('and more..')),
              SizedBox(height: 100,),
              Text('Welcome to Car of your Dreams', style: GoogleFonts.ubuntu(
                  textStyle: TextStyle(fontSize: 35,
                      color: Colors.white,
                      fontWeight: FontWeight.w500,
                      decoration: TextDecoration.none))),
              SizedBox(height: 8,),
              Text('Sign in to continue', style: GoogleFonts.ubuntu(
                  textStyle: TextStyle(fontSize: 14,
                      color: Colors.white,
                      fontWeight: FontWeight.w300,
                      decoration: TextDecoration.none))),
              SizedBox(height: 12,),
              FractionallySizedBox(
                widthFactor: 0.6,
                child: TextField(
                  onChanged: (value){
                  }
                  ,
                  decoration: InputDecoration(
                    hintText: "Email",
                    border: OutlineInputBorder(),
                    icon:Icon(Icons.email),
                    contentPadding: EdgeInsets.symmetric(horizontal: 20),
                  ),
                ),
              ),
              SizedBox(height: 5,),
              FractionallySizedBox(
                  widthFactor: 0.6,
                  child: TextField(
                      obscureText:true ,
                      onChanged: (value){
                      },
                      decoration: InputDecoration(
                        hintText: "Password",

                        border: OutlineInputBorder(),
                        icon:Icon(Icons.vpn_key_outlined),
                        contentPadding: EdgeInsets.symmetric(horizontal: 20),))
              ),
              SizedBox(height: 10,),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  TextButton(onPressed: () {},
                    child: Text('Sign in', style: GoogleFonts.londrinaSolid(
                        textStyle: TextStyle(fontSize: 25,
                            color: Colors.white,
                            fontWeight: FontWeight.w300,
                            decoration: TextDecoration.none))),),
                  SizedBox(width: 10,),
                  Icon(Icons.arrow_forward, color: Colors.white,)
                ],
              ),
              SizedBox(height: 10,),
              SignInButton(Buttons.Google,
                  text: "Sign in with Google",
                  onPressed:(){}),
              SizedBox(height: 7,),
              SignInButton(Buttons.Facebook,
                  text: "Sign in with Facebook",
                  onPressed: (){}),
              SizedBox(height: 7,),
              TextButton(
                onPressed: (){
                  Navigator.pushNamed(context, '-1');
                },
                child: Text('New user? Register..', style: GoogleFonts.londrinaSolid(
                    textStyle: TextStyle(fontSize: 20,
                        color: Colors.white,
                        fontWeight: FontWeight.w300,
                        decoration: TextDecoration.none))),),
              SizedBox(height: 50,),

            ],
          ),
        ),
      ),
    );
  }

}

class WelcomeText extends StatelessWidget {
  WelcomeText(this.welcomeText) ;
  String welcomeText;
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.fromLTRB(20.0,0,0,0),
      child: Text(welcomeText,
          style: GoogleFonts.permanentMarker(
              textStyle: TextStyle(fontSize: 30,
                  color: Colors.white70,
                  fontWeight: FontWeight.w100,
                  decoration: TextDecoration.none))),
    );
  }
}

Edit: I added the log after running the code in debugging mode please see below. I can see that it runs but complains about Flexible widget, could this be the problem? Launching lib\main.dart on Chrome in debug mode... Waiting for connection from debug service on Chrome... This app is linked to the debug service: ws://127.0.0.1:60918/FkBvyNxPDmI=/ws Debug service listening on ws://127.0.0.1:60918/FkBvyNxPDmI=/ws

Running with sound null safety Debug service listening on ws://127.0.0.1:60918/FkBvyNxPDmI=/ws

======== Exception caught by widgets library ======================================================= The following assertion was thrown while applying parent data.: Incorrect use of ParentDataWidget.

The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets. The offending Flexible is currently placed inside a DecoratedBox widget.

The ownership chain for the RenderObject that received the incompatible parent data was: RepaintBoundary ← NotificationListener ← NotificationListener ← _MaterialScrollbar ← Scrollbar ← Scrollable ← PrimaryScrollController ← SingleChildScrollView ← Flexible ← DecoratedBox ← ⋯ When the exception was thrown, this was the stack: C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/ internal/js_dev_runtime/private/ddc_runtime/errors.dart 251:49 throw packages/flutter/src/widgets/framework.dart 5753:11 packages/flutter/src/widgets/framework.dart 5768:14 [_updateParentData]

Answer 1

if you saw a blank grey screen, probably you have a null value somewhere in your code check your values for null value

Answer 2

I fixed this by changing the location of Flexible widget in the widget tree, so the buildHomeScreen widget now becomes as follows:

Widget buildHomeScreen(){
    return Container(
  decoration: BoxDecoration(color: Colors.amberAccent),
  child: Column(
    children: [
      Flexible(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Align(alignment: Alignment.centerLeft,
                  child: WelcomeText('Get to know the highest rated cars,')),

Answer 3

flutter run -d chrome

This works fine with terminal in studio. https://github.com/Dart-Code/Dart-Code/issues/3465