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

时间:2020-07-06 11:13:32

标签: flutter dart flutter-layout

我想在第一个屏幕上按下按钮时显示第二个屏幕。为此,我正在使用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()),);
          },
        ),
      ),
    );
  }
}

2 个答案:

答案 0 :(得分:1)

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

        color = Random.ColorHSV();
        this.photonView.RPC("RPC_SendColor", RpcTarget.All, new Vector3(color.r, color.g, color.b));

 // [...]

    [PunRPC]
    private void RPC_SendColor(Vector3 randomColor)
    {
         Color color = new Color(randomColor.x, randomColor.y, randomColor.z);
         gameObject.GetComponentInChildren<SpriteRenderer>().color = color;
    }

您正面临此问题,因为您要在一个屏幕中添加两个“浮动操作”按钮

尝试一下:

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

这可能对您有帮助

答案 1 :(得分:0)

有一些不需要的填充,例如

left: 400.0, right: 400.0

提及适当的代码,删除那些您可以看到其小部件的代码,请尝试以下代码

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