Flutter widgets are not showing any thing - flutter

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

Related

How to fix the error, " Each child must be laid out exactly once." in flutter

The color of the card changes once but then the error keeps appearing in the debug console and the connection to the app is lost.
It says that the relevant error-causing widget is scaffold. This error was also in the terminal
Failed assertion: line 4978 pos 16: 'child is! ParentDataElement<ParentData>': is not true.
main.dart
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(
scaffoldBackgroundColor: Color(0xFF090C22),
colorScheme: ColorScheme.fromSwatch().copyWith(
primary: Color(0xFF090C22),
),
),
home: InputPage(),
);
}
}
input_page.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'icon_content.dart';
import 'reusable_card.dart';
const bottomContainerHeight = 80.0;
const activeCardColor = Color(0xFF1D1E33);
const inactiveCardColor = Color(0xFF111328);
const bottomContainerColor = Color(0xFFEB1555);
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
Color maleCardColor = inactiveCardColor;
Color femaleCardColor = inactiveCardColor;
void updateColor(int gender) {
if (gender == 1) {
if (maleCardColor == inactiveCardColor) {
maleCardColor = activeCardColor;
} else {
maleCardColor = inactiveCardColor;
}
}
if (gender == 2) {
if (femaleCardColor == inactiveCardColor) {
femaleCardColor = activeCardColor;
} else {
femaleCardColor = inactiveCardColor;
}
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print('Male');
updateColor(1);
});
},
child: ReusableCard(
colour: maleCardColor,
cardChild: IconContent(
label: 'MALE',
cardIcon: FontAwesomeIcons.mars,
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print('Female');
updateColor(2);
});
},
child: ReusableCard(
colour: femaleCardColor,
cardChild: IconContent(
label: 'FEMALE',
cardIcon: FontAwesomeIcons.venus,
),
),
),
),
],
),
),
Expanded(
child: Expanded(
child: ReusableCard(
colour: activeCardColor,
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
colour: activeCardColor,
),
),
Expanded(
child: ReusableCard(
colour: activeCardColor,
),
),
],
),
),
Container(
color: bottomContainerColor,
margin: EdgeInsets.only(top: 10.0),
width: double.infinity,
height: bottomContainerHeight,
)
],
),
);
}
}
reusable_card.dart
import 'package:flutter/material.dart';
class ReusableCard extends StatelessWidget {
ReusableCard({#required this.colour, this.cardChild});
final Color colour;
final Widget cardChild;
#override
Widget build(BuildContext context) {
return Container(
child: cardChild,
margin: EdgeInsets.all(15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: colour,
),
);
}
}
icon_content.dart
import 'package:flutter/material.dart';
const labelTextStyle = TextStyle(
fontSize: 18.0,
color: Color(0xFF8D8E98),
);
class IconContent extends StatelessWidget {
IconContent({this.cardIcon, this.label});
final IconData cardIcon;
final String label;
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(cardIcon, size: 80.0),
SizedBox(
height: 15.0,
),
Text(label, style: labelTextStyle)
],
);
}
}
I've tried everything I know but can't seem to fix the problem.
Here the solution for the problem, there is a Expanded that is a child of other Expanded:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('BMI CALCULATOR'),
centerTitle: true,
),
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print('Male');
updateColor(1);
});
},
child: ReusableCard(
colour: maleCardColor,
cardChild: IconContent(
label: 'MALE',
cardIcon: FontAwesomeIcons.mars,
),
),
),
),
Expanded(
child: GestureDetector(
onTap: () {
setState(() {
print('Female');
updateColor(2);
});
},
child: ReusableCard(
colour: femaleCardColor,
cardChild: IconContent(
label: 'FEMALE',
cardIcon: FontAwesomeIcons.venus,
),
),
),
),
],
),
),
Expanded( // <----- just remove the Expanded that was a parent of this one
child: ReusableCard(
colour: activeCardColor,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
colour: activeCardColor,
),
),
Expanded(
child: ReusableCard(
colour: activeCardColor,
),
),
],
),
),
Container(
color: bottomContainerColor,
margin: EdgeInsets.only(top: 10.0),
width: double.infinity,
height: bottomContainerHeight,
)
],
),
);
}

I got an error when i want to pass the qr read data to my text field

I got an error when I want to pass the QR read data to my text field. I open camera first and dont get any error. But in second, i get a dump
Exception has occurred.
_AssertionError ('package:flutter/src/rendering/object.dart': Failed assertion: line 2250 pos 12: '!_debugDisposed': is not true.)
QR Scanner Widget:
import 'dart:io';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intesasoft_case_study/screens/home_screen.dart';
import 'package:intesasoft_case_study/widgets/custom_appbar.dart';
import 'package:qr_code_scanner/qr_code_scanner.dart';
import '../controllers/controller.dart';
class ScannerWidget extends StatefulWidget {
const ScannerWidget({Key? key}) : super(key: key);
#override
State<ScannerWidget> createState() => _ScannerWidgetState();
}
class _ScannerWidgetState extends State<ScannerWidget> {
CitiesController c = Get.find();
final qrKey = GlobalKey(debugLabel: 'QR');
Barcode? barcode;
QRViewController? controller;
#override
void dispose() {
controller?.dispose();
super.dispose();
}
#override
void reassemble() async {
super.reassemble();
if (Platform.isAndroid) {
await controller!.pauseCamera();
}
controller!.resumeCamera();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: const PreferredSize(
child: CustomAppbar(),
preferredSize: Size.fromHeight(70),
),
body: Stack(
alignment: Alignment.center,
children: [
buildQrView(context),
Positioned(bottom: 10, child: buildResult())
],
),
);
}
Widget buildResult() => Container(
color: Colors.white,
child: Text(
barcode != null ? 'Result : ${barcode!.code}' : 'Scan a code',
maxLines: 3,
),
);
Widget buildQrView(BuildContext context) => QRView(
key: qrKey,
onQRViewCreated: onQRViewCreated,
overlay: QrScannerOverlayShape(),
);
void onQRViewCreated(QRViewController controller) {
setState(() => this.controller = controller);
controller.scannedDataStream.listen((barcode) => setState(() {
this.barcode = barcode;
print(barcode.code);
c.qrVal.value = barcode.code!;
Get.back();
}));
}
}
HomeScreen:
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intesasoft_case_study/models/response_model.dart';
import 'package:intesasoft_case_study/screens/city_details_screen.dart';
import 'package:intesasoft_case_study/utils/colors.dart';
import 'package:intesasoft_case_study/widgets/custom_appbar.dart';
import 'package:intesasoft_case_study/widgets/drawer.dart';
import 'package:intesasoft_case_study/widgets/scanner.dart';
import '../controllers/controller.dart';
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final textController = TextEditingController();
List<ResponseModel> _foundedCityList = [];
var scaffoldKey = GlobalKey<ScaffoldState>();
void openDrawer() {
scaffoldKey.currentState!.openDrawer();
}
CitiesController c = Get.find();
#override
void initState() {
c.getCitiesData();
_foundedCityList = c.cities;
super.initState();
}
void _runFilter(String enteredKeyword) {
List<ResponseModel> results = [];
if (enteredKeyword.isEmpty) {
results = c.cities;
} else {
results = c.cities
.where((data) =>
data.name!.toLowerCase().contains(enteredKeyword.toLowerCase()))
.toList();
// toLowerCase() method to make it case-insensitive
}
setState(() {
_foundedCityList = results;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: PreferredSize(
child: CustomAppbar(
onPressed: () => openDrawer(),
),
preferredSize: const Size.fromHeight(70),
),
drawer: const DrawerWidget(),
body: Container(
padding: const EdgeInsets.all(24),
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15.0),
),
elevation: 10,
child: Obx(
() => Column(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Expanded(
child: TextField(
controller: textController,
onChanged: (value) {
_runFilter(value);
},
textInputAction: TextInputAction.search,
decoration: InputDecoration(
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: borderColor,
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey,
),
),
hintText: c.qrVal.value,
hintStyle: TextStyle(color: Colors.grey)),
),
),
IconButton(
onPressed: () {
Get.to(() => ScannerWidget());
},
icon: const Icon(Icons.camera_alt_rounded),
),
],
),
),
const SizedBox(height: 10),
Container(
padding: const EdgeInsets.only(left: 16, top: 8),
color: Colors.red,
width: double.infinity,
height: 40,
child: const Text(
'Şehirler',
textAlign: TextAlign.start,
style: TextStyle(color: Colors.white),
),
),
Expanded(
child: ListView.builder(
itemCount: _foundedCityList.length,
itemBuilder: (ctx, i) {
return Column(
children: [
ListTile(
leading: CircleAvatar(
radius: 25,
backgroundColor: Colors.white,
child: Image.network(
_foundedCityList[i].image == null
? imageUrl
: _foundedCityList[i].image!,
fit: BoxFit.cover,
),
),
title: Text(_foundedCityList[i].name!),
subtitle: Text('Nüfus: ' +
_foundedCityList[i]
.populations![0]
.population!),
trailing: IconButton(
onPressed: () {
Get.to(const CityDetailsScreen(),
arguments: _foundedCityList[i].id);
print(_foundedCityList[i].id);
},
icon: const Icon(Icons.remove_red_eye)),
),
const Divider(
color: Colors.red,
thickness: 1,
),
],
);
},
),
),
],
),
),
),
),
);
}
}

My male and female toggle button is not working in bmi calculator

Since i had moved my Gesturedetector widgit into reusable_child.dart file my app became non functional. Please someone help me to fix the issue of male female toggle
Previously when then entire code was in one file(i.e BODY.dart) it was working properly this issue came after i created sepearte dart files for each
BODY.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'reusable_card.dart';
import 'reusable_child.dart';
import 'AppDrawer.dart';
const double bottomContainerHeight = 80.0;
const Color containerColours = Color(0xFF1D1E33);
const Color inactiveContainerColor = Color(0xFF111328);
enum GenderType {
MALE,
FEMALE,
}
class BODY extends StatefulWidget {
const BODY({Key? key}) : super(key: key);
#override
_BODYState createState() => _BODYState();
}
class _BODYState extends State<BODY> {
GenderType selectedGender = GenderType.MALE;
#override
Widget build(BuildContext context) {
return Scaffold(
drawer: AppDrawer(),
appBar: AppBar(
title: Padding(
padding: const EdgeInsets.all(50.0),
child: Text('BMI Calculator'),
),
),
body: Column(
children: [
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
colour: selectedGender == GenderType.MALE
? containerColours
: inactiveContainerColor,
cardChild: ReusableChild(
containerIcon: FontAwesomeIcons.mars,
txt: 'MALE',
),
onPress: () {
setState(() {
selectedGender = GenderType.MALE;
});
},
),
),
Expanded(
child: ReusableCard(
cardChild: ReusableChild(
containerIcon: FontAwesomeIcons.venus,
txt: 'FEMALE',
),
colour: selectedGender == GenderType.FEMALE
? containerColours
: inactiveContainerColor,
onPress: () {
selectedGender = GenderType.FEMALE;
},
),
)
],
),
),
Expanded(
child: ReusableCard(
onPress: () {},
colour: containerColours,
),
),
Expanded(
child: Row(
children: [
Expanded(
child: ReusableCard(
onPress: () {},
colour: containerColours,
),
),
Expanded(
child: ReusableCard(
onPress: () {},
colour: containerColours,
),
),
],
),
),
Container(
color: Colors.pink.shade400,
width: double.infinity,
height: bottomContainerHeight,
margin: EdgeInsets.only(top: 10.0),
child: Padding(
padding: const EdgeInsets.all(17.0),
child: Text(
'Calculate',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
)
],
),
);
}
}
resuable_card.dart
import 'package:flutter/material.dart';
class ReusableCard extends StatelessWidget {
ReusableCard({
required this.colour,
this.cardChild,
this.onPress,
});
final Color colour;
final Widget? cardChild;
final VoidCallback? onPress;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: onPress,
child: Container(
child: cardChild,
margin: EdgeInsets.all(15.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0),
color: colour,
),
),
);
}
}
resuable_child.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class ReusableChild extends StatelessWidget {
final containerIcon;
final String txt;
ReusableChild({this.containerIcon = FontAwesomeIcons.amazon, this.txt = ''});
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
containerIcon,
color: Color(0xFFffffff),
size: 80.0,
),
SizedBox(
height: 10,
),
Text(
txt,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18.0,
color: Colors.grey.shade500,
),
)
],
);
}
}
the issue is in your FEMALE ReusableCard's onPress
onPress: () {
selectedGender = GenderType.FEMALE;
},
you forgot to add setState here as well
onPress: () {
setState(() {
selectedGender = GenderType.FEMALE;
});
},

Flutter null safety constructor

I am using flutter's latest(null safety) version and I created a constructor.
This code does not show anything on the screen. Why can't I see icons and text?
import 'package:flutter/material.dart';
import 'input_page.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Colors.lightBlue[300],//app bar ın rengi
scaffoldBackgroundColor: Colors.lightBlue[300],//scfold un body si
),
home: InputPage(),
);
}
}
following code input_page.dart
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'YAŞAM BEKLENTİSİ',
style: TextStyle(color: Colors.black54),
),
centerTitle: true,
),
body: Column(
children: <Widget>[
Expanded(
child: Row(
children: [
Expanded(
child: MyContainer(),
),
Expanded(
child: MyContainer(),
),
],
),
),
Expanded(
child: MyContainer(),
),
Expanded(
child: MyContainer(),
),
Expanded(
child: Row(
children: [
Expanded(
child: MyContainer(
child: Column(
children: <Widget>[
Icon(
(FontAwesomeIcons.venus),
size: 50,
color: Colors.black54,
),
Text("KADIN"),
],
),
),
),
Expanded(
child: MyContainer(),
),
],
),
),
],
),
);
}
}
class MyContainer extends StatelessWidget {
final Color color;
final Widget? child;
MyContainer({this.color = Colors.white, this.child});
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(12),
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(10), color: color),
);
}
That's because you didn't provide child to your Container.
class MyContainer extends StatelessWidget {
final Color color;
final Widget? child;
MyContainer({this.color = Colors.white, this.child});
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.all(12),
decoration: BoxDecoration(...),
child: child, // <-- Missing
);
}
}

Creating a Custom widget in Flutter

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
int _weight =60;
class RoundIconData extends StatefulWidget {
#override
_RoundIconDataState createState() => _RoundIconDataState();
}
class _RoundIconDataState extends State<RoundIconData> {
RoundIconData({#required this.icon,#required this.pressme});
final IconData icon;
final int pressme;
#override
Widget build(BuildContext context) {
return RawMaterialButton(
child: Icon(icon),
onPressed: (){
setState(() {
if(icon == FontAwesomeIcons.minus){
_weight--;
}
else{
_weight++
}
});
},
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
);
}
}
i am getting error while creating this.
What i Want
Custom widget with RawmaterialButton through which i can add icons.
if i add icon.minus then my given private weight wants to be decremented
else
given private weights to be incremented
You can copy paste run full code below
You have to move the following code to RoundIconData
RoundIconData({#required this.icon,#required this.pressme});
final IconData icon;
final int pressme;
and pass callback for refresh
working demo
full code
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
int weight = 60;
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
refresh() {
setState(() {});
}
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RoundIconData(
icon: Icon(FontAwesomeIcons.minus),
notifyParent: refresh,
),
RoundIconData(
icon: Icon(Icons.add),
notifyParent: refresh,
),
Text(
'${weight}',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class RoundIconData extends StatefulWidget {
final Icon icon;
final int pressme;
final Function() notifyParent;
RoundIconData(
{#required this.icon,
#required this.pressme,
#required this.notifyParent});
#override
_RoundIconDataState createState() => _RoundIconDataState();
}
class _RoundIconDataState extends State<RoundIconData> {
#override
Widget build(BuildContext context) {
return RawMaterialButton(
child: widget.icon,
onPressed: () {
print(widget.icon.toString());
print(Icon(FontAwesomeIcons.minus).toString());
if (widget.icon.toString() == Icon(FontAwesomeIcons.minus).toString()) {
weight--;
widget.notifyParent();
print(weight);
} else {
weight++;
widget.notifyParent();
print(weight);
}
},
elevation: 6.0,
constraints: BoxConstraints.tightFor(
width: 56.0,
height: 56.0,
),
shape: CircleBorder(),
fillColor: Color(0xFF4C4F5E),
);
}
}
Creating a Custom widget in Flutter
import 'package:flutter/material.dart';
class WelcomePage extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Auth',
theme: ThemeData(
primaryColor: Colors.purple,
scaffoldBackgroundColor: Colors.white,
),
home:Scaffold(
body: Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"WELCOME TO XYZ",
style: TextStyle(fontWeight: FontWeight.bold,color: Colors.purple,fontSize: 25),
),
Padding(
padding: const EdgeInsets.only(right: 40),
child: Image.asset(
"assets/images/food_order.png",
height: 200,
),
),
SizedBox(height: 10 ),
loginMethod(),
signUpMethod(),
],
),
),
),
),
);
}
// Login Button Method Widget
Widget loginMethod(){
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: 200,
height: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: FlatButton(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
color: Colors.blue,
onPressed: (){},
child: Text(
'Login',
style: TextStyle(color: Colors.white),
),
),
),
);
}
// Signup button method widget
Widget signUpMethod (){
return Container(
margin: EdgeInsets.symmetric(vertical: 10),
width: 200,
height: 50,
child: ClipRRect(
borderRadius: BorderRadius.circular(29),
child: FlatButton(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 40),
color: Colors.blue,
onPressed: (){},
child: Text(
'Sign up',
style: TextStyle(color: Colors.white),
),
),
),
);
}
}