Flutter小部件未显示任何内容

时间:2020-04-16 14:42:37

标签: flutter flutter-layout flutter-test flutter-widget flutter-container

我正在做一个作业,我的Flutter应用程序假定显示Text和FontAwesome的字体。但是小部件没有显示任何内容,Android Studio也没有显示错误和异常。这是我显示的类代码。

$ gcc main.c -o main.exe; ./main.exe
52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 52, 44,

我的reuseable_card类是:

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_reuse.dart';
import 'reuseable_card.dart';
import 'constants.dart';

enum Gender{
  male, female,
}

class InputPage extends StatefulWidget {
  @override
  _InputPageState createState() => _InputPageState();
}

class _InputPageState extends State<InputPage> {
  Gender selectedGender;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text('BMI CALCULATOR'),
      ),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Expanded(
            child: Row(
              children: <Widget>[
                Expanded(
                  child: ReUseAbleCard(
                    onPress: (){
                      setState(() {
                        selectedGender = Gender.male;
                      });
                    },
                    colour: selectedGender == Gender.male ? kActiveCardColor : kInactiveCardColor,
                    cardIcons:
                        IconReuse(icons: FontAwesomeIcons.mars, gender: 'MALE'),
                  ),
                ),
                Expanded(
                  child: ReUseAbleCard(
                    onPress: (){
                      setState(() {
                        selectedGender = Gender.female;
                      });
                    },
                    colour: selectedGender == Gender.female? kActiveCardColor: kInactiveCardColor,
                    cardIcons: IconReuse(
                        icons: FontAwesomeIcons.venus, gender: 'FEMALE'),
                  ),
                ),
              ],
            ),
          ),
 Container(
            color: kBottomCardColor,
            height: kBottomCardHeight,
            width: double.infinity,
          ),
        ],
      ),
    );
  }
}

和icon_class:

import 'package:flutter/material.dart';

class ReUseAbleCard extends StatelessWidget {
  ReUseAbleCard({@required this.colour, this.cardIcons,this.onPress});

  final Widget cardIcons;
  final Color colour;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onPress,
      child: Container(
        margin: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
      ),
    );
  }
}

和常量类:

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

class IconReuse extends StatelessWidget {
  IconReuse({ this.icons, this.gender});
  final IconData icons;
  final String gender;
  @override
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Icon(
            icons,
            size: 80,
          ),
          SizedBox(
            height: 10.0,
          ),
          Text(
            gender,
            style: kTextLabelStyle,
          ),
        ],
    );
  }
}

和主要班级:

import 'package:flutter/material.dart';

const kActiveCardColor = Color(0xFF1D1E33);
const kInactiveCardColor = Color(0xFF111328);
const kBottomCardColor = Color(0xFFEB1555);
const kBottomCardHeight = 80.0;


const kTextLabelStyle = TextStyle(
  fontSize: 18.0,
  color: Color(0xFF8D8E98),
);

我在pubspec.yaml文件中添加了fontAwesome依赖项。 我曾多次删除应用。 我做了清理Flutter 但不了解所穿的衣服。

1 个答案:

答案 0 :(得分:1)

您可以在下面复制粘贴运行完整代码
您忘记将cardIcons添加为child的{​​{1}}中
代码段

Container

工作演示

enter image description here

完整代码

return GestureDetector(
      onTap: onPress,
      child: Container(
        margin: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          color: colour,
          borderRadius: BorderRadius.circular(10.0),
        ),
        child: cardIcons,
      ),
    );