Flutter 小部件没有显示任何东西

Question

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

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

我的 reuseable_card 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),
        ),
      ),
    );
  }
}

和icon_class：

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

和常量 class:

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

和主要 class:

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

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

我在 pubspec.yaml 文件中添加了 fontAwesome 依赖项.. 我多次 Delete 应用程序。我清理了 Flutter 但不明白什么是磨损..

Answer 1

您可以复制粘贴运行下面的完整代码
您忘记添加 cardIcons 作为 child of Container
代码片段

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

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.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),
);

void main() => runApp(BMICalculator());

class BMICalculator extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        primaryColor: Color(0xFF0A0E21),
        scaffoldBackgroundColor: Color(0xFF0A0E21),
      ),
      home: InputPage(),
    );
  }
}

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

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),
        ),
        child: cardIcons,
      ),
    );
  }
}

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

Flutter 小部件没有显示任何东西

Flutter widgets are not showing any thing

flutter

flutter-test

flutter-layout

flutter-container

flutter-widget