I'm working on an assignment and my Flutter app suppose to show Text and FontAwesome's Fonts. But widgets are not showing anything and the Android Studio also showing no error and no exceptions..Here is my displaying class code.
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,
),
],
),
);
}
}
and my reuseable_card class is:
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),
),
),
);
}
}
and 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,
),
],
);
}
}
and the constant 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),
);
and the main 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(),
);
}
}
I have add fontAwesome dependencies in pubspec.yaml file.. I did Delete app many times. I did clean the Flutter but not understanding what is worng..
You can copy paste run full code below
You forgot to add cardIcons
as child
of Container
code snippet
return GestureDetector(
onTap: onPress,
child: Container(
margin: EdgeInsets.all(10.0),
decoration: BoxDecoration(
color: colour,
borderRadius: BorderRadius.circular(10.0),
),
child: cardIcons,
),
);
working demo
full code
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,
),
],
),
);
}
}