Home > front end >  Why does this code display a blank screen when running?
Why does this code display a blank screen when running?

Time:05-20

Before displaying the code, here are the things that I checked to avoid similar answers :

  • android:extratNativeLibs="true"

  • Jsonfile firebase connected

  • routegenerator and initialroute checked in the main file and
    generatorfile

.I like to avoid mediaQuery and work with percentages, that is why I use FractionallySizedBox. Here is the code of the initial route :

 import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class Start extends StatelessWidget {
  const Start({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Align(
                alignment: Alignment.center,
                child: Center(
                    child: Column(mainAxisSize: MainAxisSize.min, children: <Widget>[
                  FractionallySizedBox(widthFactor: 0.15, heightFactor: 0.15, child: Image.asset('assets/crown.png')),
                  FractionallySizedBox(
                      widthFactor: 0.40,
                      heightFactor: 0.20,
                      child: TextButton(
                          onPressed: () {
                            Navigator.of(context).pushNamed('/items');
                          },
                          child: Container(
                              decoration: BoxDecoration(color: Colors.purple),
                              child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                                const Text('Start shopping',
                                    style: TextStyle(
                                      color: Colors.white,
                                      fontStyle: FontStyle.italic,
                                      fontSize: 25,
                                    )),
                                Image.asset('assets/crown.png')
                              ]))))
                ])))));
  }
}

CodePudding user response:

Warp your FractionallySizedBox with Expanded

              Expanded(
                child: FractionallySizedBox(
                    widthFactor: 0.15,
                    heightFactor: 0.15,
                    child: Image.asset('assets/crown.png')),
              ),
              Expanded(
                child: FractionallySizedBox(
                  widthFactor: 0.40,
                  heightFactor: 0.20,
                  child: TextButton(
                    onPressed: () {
                      Navigator.of(context).pushNamed('/items');
                    },
                    child: Container(
                      decoration: BoxDecoration(color: Colors.purple),
                      child: Row(
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          const Text('Start shopping',
                              style: TextStyle(
                                color: Colors.white,
                                fontStyle: FontStyle.italic,
                                fontSize: 25,
                              )),
                          Image.asset('assets/crown.png')
                        ],
                      ),
                    ),
                  ),
                ),
              ),
  • Related