Rahul Singh
Rahul Singh

Reputation: 335

Blank screen displayed when I added container widget in flutter

I want to display the second screen when the button is pressed on the first screen. For that, I am using navigation.push. That works fine until I add a container widget inside the row widget in my Second screen layout. When I remove that it works fine. Can Anyone tell me what I am doing wrong here? This is the code of my second screen

import 'package:flutter/material.dart';

class NewScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.white,
        padding: EdgeInsets.only(top: 50.0, bottom: 60.0),
        child: Column(
           children: <Widget>[
           
             ClipRRect(
                 borderRadius: BorderRadius.circular(200.0),
                 child: Image.asset(
                   'assets/images/test.png',
                   height: 200.0,
                   width: 200.0,)
             ),


             SizedBox(height: 20.0,),
             Text(
               'Remote User',
               style: TextStyle(
                   color: Colors.black,
                   fontWeight: FontWeight.w700,
                   fontSize: 25),
             ),
             SizedBox(height: 20.0,),
             Text(
               'Incoming Call',
               style: TextStyle(
                   color: Colors.black,
                   fontWeight: FontWeight.w400,
                   fontSize: 15),
             ),
             SizedBox(height: 120.0,),
             
             Row(
               children: <Widget>[
               //when I add single container it works fine
                 Container(
                   height: 70.0,
                   width: 70.0,
                   child: FittedBox(
                     child: FloatingActionButton(
                       onPressed: () {},
                       elevation: 20.0,
                       //shape: CircleBorder(side: BorderSide(color: Colors.red)),
                       mini: false,
                       child: Icon(
                         Icons.call,
                         color: Colors.white,
                       ),
                       backgroundColor: Colors.green,
                     ),
                   ),
                 ),
                 // this widget cause blank screen
                 Container(
                   height: 70.0,
                   width: 70.0,
                   child: FittedBox(
                     child: FloatingActionButton(
                       onPressed: () {},
                       elevation: 20.0,
                       //shape: CircleBorder(side: BorderSide(color: Colors.red)),
                       mini: false,
                       child: Icon(
                         Icons.call,
                         color: Colors.white,
                       ),
                       backgroundColor: Colors.green,
                     ),
                   ),
                 ),
               ],
             ),
        ]
      ),
      ),
    );
  }
}

Here is the code of First screen:

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Second Screen'),
          onPressed: () {
          Navigator.push(context, MaterialPageRoute(builder: (context) => NewScreen()),);
          },
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 1150

Answers (2)

littleironical
littleironical

Reputation: 1914

Firstly, remove the left and right padding in Line-9

padding: EdgeInsets.only(top: 50.0, bottom: 60.0, left: 400.0, right: 400.0),

You are facing this problem because you are adding two Floating action buttons in one screen

Try this:

import 'package:flutter/material.dart';

 class NewScreen extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
  return Scaffold(
   body: Container(
    color: Colors.white,
    padding: EdgeInsets.only(top: 50.0, bottom: 60.0),
    child: Column(
       children: <Widget>[
       
         ClipRRect(
             borderRadius: BorderRadius.circular(200.0),
             child: Image.asset(
               'assets/images/test.png',
               height: 200.0,
               width: 200.0,)
         ),


         SizedBox(height: 20.0,),
         Text(
           'Remote User',
           style: TextStyle(
               color: Colors.black,
               fontWeight: FontWeight.w700,
               fontSize: 25),
         ),
         SizedBox(height: 20.0,),
         Text(
           'Incoming Call',
           style: TextStyle(
               color: Colors.black,
               fontWeight: FontWeight.w400,
               fontSize: 15),
         ),
         SizedBox(height: 120.0,),
         
         Row(
           children: <Widget>[

           //when I add single container it works fine
           //EDITED PART

             Container(
               height: 70.0,
               width: 70.0,
               decoration: BoxDecoration(
                 color: Colors.green,
                 shape: BoxShape.circle
               ),
               child: GestureDetector(
                 onTap: () {},
                 //shape: CircleBorder(side: BorderSide(color: Colors.red)),
                //  mini: false,
                 child: Icon(
                   Icons.call,
                   color: Colors.white,
                 ),
                //  backgroundColor: Colors.green,
               ),
             ),

             // this widget cause blank screen
             //EDITED PART

             Container(
               height: 70.0,
               width: 70.0,
               decoration: BoxDecoration(
                 color: Colors.green,
                 shape: BoxShape.circle
               ),
               child: GestureDetector(
                 onTap: () {},
                 //shape: CircleBorder(side: BorderSide(color: Colors.red)),
                //  mini: false,
                 child: Icon(
                   Icons.call,
                   color: Colors.white,
                 ),
                //  backgroundColor: Colors.green,
               ),
             ),
           ],
         ),
       ]
     ),
    ),
  );
 }
}

It may help you

Upvotes: 1

Jitesh Mohite
Jitesh Mohite

Reputation: 34280

Some unwanted padding is there, like

left: 400.0, right: 400.0

mentioned proper ones, removing those you can see your widgets, try below code

padding:
        EdgeInsets.only(top: 50.0, bottom: 60.0),

Upvotes: 0

Related Questions