flutter - 在flutter中添加容器小部件时显示空白屏幕

Question

我想在第一个屏幕上按下按钮时显示第二个屏幕。为此，我正在使用navigation.push。直到在“第二个屏幕”布局的行小部件内添加容器小部件之前，此方法均能正常工作。当我删除它工作正常。有人可以告诉我我在做什么错吗？
这是我第二个屏幕的代码

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,
                     ),
                   ),
                 ),
               ],
             ),
        ]
      ),
      ),
    );
  }
}

这是第一个屏幕的代码:

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()),);
          },
        ),
      ),
    );
  }
}

Answer 1

首先，删除第9行中的左右填充

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

您正面临此问题，因为您要在一个屏幕中添加两个“ float 操作”按钮
试试这个:

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,
               ),
             ),
           ],
         ),
       ]
     ),
    ),
  );
 }
}

可能对你有帮助