flutter: child isn't defined - flutter

I'm having trouble in an attempt to add an child but idk why doesn't work unless something is wrong with my numberform.dart
TextFormField(
controller: numteamController,
validator: (value) {
if (value!.isEmpty) {
return "Enter Valid Number";
} else {
return null;
}
},
child: NumberForm(
text: "Team Number",
formText: "Enter team number",
padding: 0,
)
),
numberform.dart
import 'package:flutter/material.dart';
class NumberForm extends StatelessWidget {
const NumberForm(
{Key? key,
required this.text,
required this.formText,
required this.padding,
required TextFormField child})
: super(key: key);
final String formText;
final String text;
final double padding;
#override
Widget build(BuildContext context) {
return Column(
children: [
SizedBox(
height: padding,
),
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: const EdgeInsets.only(bottom: 10.0, left: 30),
child: Text(
text,
style: const TextStyle(
fontFamily: "Oxygen",
fontWeight: FontWeight.bold,
color: Colors.black,
fontSize: 20,
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 10.0, right: 30, left: 30),
child: TextFormField(
decoration: InputDecoration(
labelText: formText,
fillColor: Colors.white,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(25.0),
borderSide: const BorderSide(),
),
//fillColor: Colors.green
),
keyboardType: TextInputType.number,
style: const TextStyle(
fontFamily: "Poppins",
),
),
),
],
);
}
},

Here you have to know some basic things
TextFormField doesn't have child property.
Why are using TextFormField child in NumberForm if you are not using it.
you can use NumberForm like the below code.
#override
Widget build(BuildContext context) {
return const NumberForm(
text: "Team Number",
formText: "Enter team number",
padding: 0,
);
}

child: NumberForm(
text: "Team Number",
formText: "Enter team number",
padding: 0,
child: TextFormField,//add the textformfield here
)
In the numberForm class you have mentioned that a child is required but in the above codea child is missing. Add a key child:null in the above code.

Related

How to make Dropdown Button Seprate class andd use in any where in flutter project?

I make Seprate DropDownButton custom StatelessWidget class but its
give me error.
Error=>
There should be exactly one item with [DropdownButton]'s value:
Instance of 'Company'. Either zero or 2 or more [DropdownMenuItem]s
were detected with the same value
'package:flutter/src/material/dropdown.dart': Failed assertion: line
882 pos 15: 'items == null || items.isEmpty || value == null ||
items.where((DropdownMenuItem item) {
return item.value == value;
}).length == 1'
**
Code
**
This is my custom class
import "package:flutter/material.dart";
class MyDropDown<T> extends StatelessWidget {
List<DropdownMenuItem<T>> items;
final T value;
String hintText;
ValueChanged<T?> onChanged;
MyDropDown(
{Key? key,
required this.items,
required this.value,
required this.hintText,
required this.onChanged})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(horizontal: 10.0),
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(
color: Colors.grey,
width: 0.3,
),
borderRadius: BorderRadius.all(
Radius.circular(
30.0,
),
),
),
child: Row(
children: [
Expanded(
// T
child: DropdownButton<T>(
hint: Text(
hintText,
style: TextStyle(),
),
isExpanded: true,
value: value,
items: items,
onChanged: onChanged,
underline: Container(),
),
)
],
),
);
}
}
=> This is my model class
class Company {
int? cId;
String? cName;
Company({ this.cId, this.cName});
}
=> Where i am use this class
import 'package:flutter/material.dart';
import 'package:sqllite_chart/widget/custom_dropdown_widget.dart';
import 'package:sqllite_chart/widget/custom_textformfield_widget.dart';
class MachineDataAddDialog extends StatefulWidget {
MachineDataAddDialog({Key? key}) : super(key: key);
#override
State<MachineDataAddDialog> createState() => _MachineDataAddDialogState();
}
class _MachineDataAddDialogState extends State<MachineDataAddDialog> {
TextEditingController textEditingControllerMId = TextEditingController();
TextEditingController textEditingControllerMName = TextEditingController();
TextEditingController textEditingControllerMTypeId = TextEditingController();
TextEditingController textEditingControllerMTypeName =
TextEditingController();
TextEditingController textEditingControllerCWGId = TextEditingController();
TextEditingController textEditingControllerCWGName = TextEditingController();
TextEditingController textEditingControllerMDesc = TextEditingController();
List<Company> companies = [
Company(cId: 1, cName: 'ABC'),
Company(cId: 2, cName: 'PQR'),
Company(cId: 3, cName: 'RST'),
Company(cId: 4, cName: 'GFI'),
Company(cId: 5, cName: 'XYZ')
];
List<DropdownMenuItem<Company>> companyListDropDownItems = [];
Company? selectedCompany;
int selectedCompanyId = 1;
String selectedCompanyTitle = 'ABC';
List<DropdownMenuItem<Company>> buildCompanyList(List company) {
List<DropdownMenuItem<Company>> items = [];
for (Company companyList in company) {
items.add(
DropdownMenuItem(
value: companyList,
child: Row(
children: [
Text(
'${companyList.cName}',
style: TextStyle(
color: Color.fromRGBO(49, 87, 110, 1.0),
),
),
],
),
),
);
}
return items;
}
void onChangeActivityListDropDownItem(Company? selected) {
setState(() {
selectedCompany = selected!;
selectedCompanyId = selected.cId!;
selectedCompanyTitle = selected.cName!;
});
}
#override
void initState() {
selectedCompany=Company();
companyListDropDownItems = buildCompanyList(companies);
super.initState();
}
#override
Widget build(BuildContext context) {
return AlertDialog(
title: const Align(
alignment: Alignment.bottomCenter,
child: Text("Enter Machine Details",
style: TextStyle(
shadows: [
Shadow(
color: Color.fromRGBO(49, 87, 110, 1.0),
offset: Offset(0, -5))
],
color: Colors.transparent,
decorationColor: Color.fromRGBO(49, 87, 110, 1.0),
decoration: TextDecoration.underline,
decorationThickness: 1,
decorationStyle: TextDecorationStyle.double,
)),
),
content: SingleChildScrollView(
child: Column(
children: [
CustomTextFormFieldWidget(
controller: textEditingControllerMId,
keyboardType: TextInputType.number,
hintText: "Enter Machine Id",
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerMName,
keyboardType: TextInputType.text,
hintText: "Enter Machine Name",
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerMTypeId,
keyboardType: TextInputType.number,
hintText: "Enter Machine Type ID",
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerMTypeName,
keyboardType: TextInputType.text,
hintText: "Enter Machine Type Name",
),
SizedBox(
height: 5
),
MyDropDown<Company>(
hintText: 'Company',
value: selectedCompany!,
items: companyListDropDownItems,
onChanged:onChangeActivityListDropDownItem,
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerCWGId,
keyboardType: TextInputType.number,
hintText: "Enter CWG Id",
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerCWGName,
keyboardType: TextInputType.text,
hintText: "Enter CWG Name",
),
SizedBox(
height: 5
),
CustomTextFormFieldWidget(
controller: textEditingControllerMDesc,
keyboardType: TextInputType.text,
hintText: "Enter Machine Description",
maxLines: 2,
),
],
),
),
actions: [
Row(
children: [
Expanded(
flex: 4,
child: MaterialButton(
onPressed: () {
Navigator.of(context).pop();
},
color: Color.fromRGBO(49, 87, 110, 1.0),
child: Text("CANCEL", style: TextStyle(color: Colors.white)),
),
),
SizedBox(
width: 10,
),
Expanded(
flex: 4,
child: MaterialButton(
onPressed:() {},
child: Text("ADD", style: TextStyle(color: Colors.white)),
color: Color.fromRGBO(49, 87, 110, 1.0),
),
)
],
),
],
);
}
}
Problem is while creating your companylist to pass to your custom widget, you pass companyList as a value, which you can not do because value expects String?. You need to find a unique string that belongs to that company
DropdownMenuItem(
value: companyList,
child: Row(
children: [
Text(
'${companyList.cName}',
style: TextStyle(
color: Color.fromRGBO(49, 87, 110, 1.0),
),
),
],
),

Flutter TextField selection highlighter controls appear too high

Screenshot of the issue and code in use below, the selection controls are above the textfield for some bizarre reason.
var textField = TextField(
selectionHeightStyle: BoxHeightStyle.max,
scrollPadding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom + 20 * 4),
textInputAction: TextInputAction.done,
keyboardType: TextInputType.numberWithOptions(signed: true, decimal: true),
decoration: InputDecoration(
border: InputBorder.none,
),
controller: textEditingController,
onTap: () {
Future.delayed(const Duration(milliseconds: 800), () {
textEditingController.selectAll();
});
},
onSubmitted: (newText) {
if (newText.length == 0) {
callback(0, true);
} else {
callback(int.parse(newText), true);
}
},
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.headline4!.copyWith(
fontWeight: FontWeight.w700,
fontSize: 16.0,
color: WWColors.pinkBrandColor(),
),
);
return Padding(
padding: padding,
child: Container(alignment: Alignment.center, child: textField),
);
In answer to my own question, this in the TextField attributes did the job in my case:
decoration: InputDecoration(
isDense: true, // important line
contentPadding: EdgeInsets.fromLTRB(0, 5, 0, 5),
border: InputBorder.none,
),
Hi you can try create a custom widget for it to make the customisation as you required below is the simple example for the mentioned implementation.
class CounterWidget extends StatefulWidget {
final double width;
final double height;
final double spaceWidth;
final Color controlColor;
final Color valueColor;
final Function(int count) callback;
const CounterWidget({
Key? key,
required this.title,
required this.callback,
required this.controlColor,
required this.valueColor,
this.width = 50,
this.height = 30,
this.spaceWidth = 5,
}) : super(key: key);
final String title;
#override
State<CounterWidget> createState() => _CounterWidgetState();
}
class _CounterWidgetState extends State<CounterWidget> {
int count = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Row(
children: [
//Incrementor
InkWell(
onTap: () {
setState(() {
count++;
//Callback method to expose the count to the higher hier archy.
widget.callback(count);
});
},
child: Container(
decoration: BoxDecoration(
color: widget.controlColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(widget.height / 0.1),
bottomLeft: Radius.circular(widget.height / 0.1),
),
),
child: const Center(
child: Icon(
Icons.add,
color: Colors.white,
),
),
width: widget.width,
height: widget.height,
),
),
SizedBox(width: widget.spaceWidth),
Container(
color: widget.valueColor,
width: widget.width,
height: widget.height,
child: Center(
child: Text(
count.toString(),
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20,
),
),
),
),
SizedBox(width: widget.spaceWidth),
InkWell(
onTap: () {
if (count > 0) {
setState(() {
count--;
widget.callback(count);
});
}
},
child: Container(
width: widget.width,
height: widget.height,
decoration: BoxDecoration(
color: widget.controlColor,
borderRadius: BorderRadius.only(
topRight: Radius.circular(widget.height / 0.1),
bottomRight: Radius.circular(widget.height / 0.1),
),
),
child: const Center(
child: Icon(
Icons.remove,
color: Colors.white,
),
),
),
),
],
),
);
}
}

Flutter - How can I pass a Bloc as a parameter in a reusable Widget?

I'm building a login page, and I have created what I intend to be used as a fully dynamic TextField widget.
I now need to create 2 instances of that widget (email and password inputs) and send parameters for hintText, errorText, and then my LoginBloc and validation method which are of course different for each input.
My problem is that Dart isn't letting me use the bloc my widget receives as a type and therefore the code doesn't work.
What can I do to fix this? Or am I doing this wrong altogether and is there a better way of doing this?
login page:
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Padding(
padding: const EdgeInsets.only(
left: 16,
right: 16,
),
child: SingleChildScrollView(
child: Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 50),
child: Text(
AppLocalizations.of(context).initiateSession,
style: Theme.of(context).textTheme.headline6,
),
),
BlocProvider(
create: (context) {
return LoginBloc();
},
child: BlocListener<LoginBloc, LoginState>(
listener: (context, state) {
if (state.status.isSubmissionFailure) {
ScaffoldMessenger.of(context)
..hideCurrentSnackBar()
..showSnackBar(
const SnackBar(
content: Text('Authentication Failure')),
);
}
},
child: Align(
alignment: const Alignment(0, -1 / 3),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextInput(AppLocalizations.of(context).email, LoginBloc, LoginEmailChanged, getError),
TextInput(AppLocalizations.of(context).password, LoginBloc, LoginEmailChanged, getError),
],
),
),
),
),
],
),
),
),
),
);
}
}
custom textfield:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class TextInput extends StatelessWidget {
final String hint;
final Bloc bloc;
final Function blocEvent;
final String errorMessage;
TextInput(this.hint, this.bloc, this.blocEvent, this.errorMessage);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: TextField(
decoration: InputDecoration(
fillColor: Color(0xfff5f5f5),
filled: true,
border: InputBorder.none,
hintText: hint,
hintStyle: TextStyle(
color: Color(0xffb4b4b4),
fontSize: 18.0,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w100,
),
contentPadding: EdgeInsets.symmetric(
vertical: 22,
horizontal: 14,
),
errorText: errorMessage,
),
style: Theme.of(context).textTheme.bodyText1,
cursorColor: Theme.of(context).primaryColor,
cursorHeight: 20,
onChanged: (textValue) =>
context.read<bloc>().add(blocEvent(textValue)), //this is the line where the error occurs, where I use "bloc" as a type.
),
);
}
}
You are not supposed to pass bloc and blocEvent as parameters to your TextInput widget. You can perform a lookup from your child widgets using BlocProvider.of<LoginBloc>() or context.read<LoginBloc>() to get the instance of your LoginBloc.
First, it's better to have 2 separate widget class for EmailInputTextField and PasswordInputTextField. Now you can manage independent text fields.
Then you should have some event handling code inside of your bloc. For example, onEmailChanged(), onPasswordChanged().
Then you can do something like:
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class EmailInputTextField extends StatelessWidget {
const EmailInputTextField({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: BlocBuilder<LoginBloc, LoginState>(
builder: (context, state) {
return TextField(
decoration: InputDecoration(
fillColor: Color(0xfff5f5f5),
filled: true,
border: InputBorder.none,
hintText: 'Enter your email address',
hintStyle: TextStyle(
color: Color(0xffb4b4b4),
fontSize: 18.0,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w100,
),
contentPadding: EdgeInsets.symmetric(
vertical: 22,
horizontal: 14,
),
errorText: 'Invalid Email',
),
style: Theme.of(context).textTheme.bodyText1,
cursorColor: Theme.of(context).primaryColor,
cursorHeight: 20,
onChanged: (textValue) =>
context.read<LoginBloc>().add(EmailChanged(textValue)); // Assuming you have an event class EmailChanged()
);
},
),
);
}
}
Also,
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class PasswordInputTextField extends StatelessWidget {
const PasswordInputTextField({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: 10),
child: BlocBuilder<LoginBloc, LoginState>(
builder: (context, state) {
return TextField(
decoration: InputDecoration(
fillColor: Color(0xfff5f5f5),
filled: true,
border: InputBorder.none,
hintText: 'Enter your password',
hintStyle: TextStyle(
color: Color(0xffb4b4b4),
fontSize: 18.0,
fontFamily: 'Helvetica',
fontWeight: FontWeight.w100,
),
contentPadding: EdgeInsets.symmetric(
vertical: 22,
horizontal: 14,
),
errorText: 'Short Password',
),
style: Theme.of(context).textTheme.bodyText1,
cursorColor: Theme.of(context).primaryColor,
cursorHeight: 20,
onChanged: (textValue) =>
context.read<LoginBloc>().add(PasswordChanged(textValue)); // Assuming you have an event class PasswordChanged()
);
},
),
);
}
}

Pass Value between two class in Flutter

How can pass two String between two class? I have a Signin Class where i have two TextField for email and password. Then I have a Button class but I don't know how get email and password String.
I would not create a single class to keep tidy my code.
This is my code:
SigninClass
import 'package:cleverpot/Activity/home.dart';
import 'package:cleverpot/Helper/authelper.dart';
import 'package:cleverpot/signin/signout/Header.dart';
import 'package:cleverpot/signin/signout/InputField.dart';
import 'package:cleverpot/signin/signout/InputWrapper.dart';
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
class Signup extends StatefulWidget {
Signup({Key? key}) : super(key: key);
#override
_nameState createState() => _nameState();
}
class _nameState extends State<Signup> {
String email = "";
String password = "";
authHelper _helper = authHelper();
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
colors: [Colors.green, Colors.greenAccent])),
child: Column(
children: [
SizedBox(
height: 80,
),
Header(),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.green[300],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60),
topRight: Radius.circular(60))),
child: InputWrapper(),
))
],
),
),
);
}
}
InputWrapper Class:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'Button.dart';
import 'InputField.dart';
class InputWrapper extends StatefulWidget {
InputWrapper({Key? key}) : super(key: key);
#override
_InputWrapperState createState() => _InputWrapperState();
}
class _InputWrapperState extends State<InputWrapper> {
String email = '';
String password = '';
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(30),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: Colors.white, borderRadius: BorderRadius.circular(10)),
child: InputField(),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
text: "Password dimenticata?",
style: TextStyle(color: Colors.grey),
recognizer: TapGestureRecognizer()
..onTap = () {
print("Cliccato");
})),
SizedBox(
height: 20,
),
Button(),
SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: Colors.green[500],
borderRadius: BorderRadius.circular(50)),
child: RichText(
text: TextSpan(
text: "Non sei registrato? Clicca qua",
style: TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.of(context).push(PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return Registration();
}));
print("Cliccato");
})),
),
],
),
);
}
InputField Class:
import 'package:flutter/material.dart';
class InputField extends StatefulWidget {
InputField({Key? key}) : super(key: key);
#override
_InputFieldState createState() => _InputFieldState();
}
class _InputFieldState extends State<InputField> {
String password = '';
String email = '';
String getil() {
return password;
}
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Color(4294638330)))),
child: TextField(
decoration: InputDecoration(
hintText: "Enter your email",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none),
),
),
Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(bottom: BorderSide(color: Color(4294638330)))),
child: TextField(
onChanged: (value) {
setState(() {
password = value;
print(password);
});
},
decoration: InputDecoration(
hintText: "Enter your password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none),
),
),
],
);
;
}
}
And Button Class:
import 'package:cleverpot/Helper/authelper.dart';
import 'package:cleverpot/signin/signout/InputField.dart';
import 'package:flutter/material.dart';
class Button extends StatelessWidget {
authHelper _helper = authHelper();
#override
Widget build(BuildContext context) {
return Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
color: Colors.cyan[500],
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: ElevatedButton(
onPressed: () {
print(fieldState.getil());
},
child: Text(
"Accedi",
style: TextStyle(
color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
),
);
}
}
I have to get Email and Password from InputField in InputWrapper and put inside Button Class in InputWrapper
You should Lift your state up. This is a general advice in flutter, the state variables should be contained in a stateful widget which is common to every widget you want to share the variables to.
In your case something like this:
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
class Signup extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: Container(
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter, colors: [Colors.green, Colors.greenAccent])),
child: Column(
children: [
SizedBox(
height: 80,
),
Header(),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.green[300],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(60), topRight: Radius.circular(60))),
child: InputWrapper(),
),
),
],
),
),
);
}
}
class InputWrapper extends StatefulWidget {
InputWrapper({Key? key}) : super(key: key);
#override
_InputWrapperState createState() => _InputWrapperState();
}
class _InputWrapperState extends State<InputWrapper> {
String email = '';
String password = '';
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(30),
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Container(
decoration:
BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(10)),
child: InputField(
email: email,
password: password,
onEmailChanged: (value) => setState(() => email = value),
onPasswordChanged: (value) => setState(() => password = value),
),
),
SizedBox(
height: 20,
),
RichText(
text: TextSpan(
text: "Password dimenticata?",
style: TextStyle(color: Colors.grey),
recognizer: TapGestureRecognizer()
..onTap = () {
print("Cliccato");
})),
SizedBox(
height: 20,
),
Button(password: password),
SizedBox(
height: 20,
),
Container(
decoration: BoxDecoration(
color: Colors.green[500], borderRadius: BorderRadius.circular(50)),
child: RichText(
text: TextSpan(
text: "Non sei registrato? Clicca qua",
style: TextStyle(color: Colors.black),
recognizer: TapGestureRecognizer()
..onTap = () {
Navigator.of(context).push(
PageRouteBuilder(
opaque: false,
pageBuilder: (BuildContext context, _, __) {
return Registration();
},
),
);
print("Cliccato");
},
),
),
),
],
),
);
}
}
class InputField extends StatelessWidget {
final String email;
final String password;
final void Function(String) onEmailChanged;
final void Function(String) onPasswordChanged;
const InputField({
Key? key,
required this.email,
required this.password,
required this.onEmailChanged,
required this.onPasswordChanged,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Container(
padding: EdgeInsets.all(10),
decoration:
BoxDecoration(border: Border(bottom: BorderSide(color: Color(4294638330)))),
child: TextField(
onChanged: onEmailChanged,
decoration: InputDecoration(
hintText: "Enter your email",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
Container(
padding: EdgeInsets.all(10),
decoration:
BoxDecoration(border: Border(bottom: BorderSide(color: Color(4294638330)))),
child: TextField(
onChanged: onPasswordChanged,
decoration: InputDecoration(
hintText: "Enter your password",
hintStyle: TextStyle(color: Colors.grey),
border: InputBorder.none,
),
),
),
],
);
}
}
class Button extends StatelessWidget {
final String password;
const Button({
Key? key,
required this.password,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 50,
margin: EdgeInsets.symmetric(horizontal: 50),
decoration: BoxDecoration(
color: Colors.cyan[500],
borderRadius: BorderRadius.circular(10),
),
child: Center(
child: ElevatedButton(
onPressed: () {
print(password);
},
child: Text(
"Accedi",
style: TextStyle(color: Colors.white, fontSize: 15, fontWeight: FontWeight.bold),
),
),
),
);
}
}

How to use custom text field in another StatefulWidget class with a lot of parameters?

Today I made a custom text field of my own and I want to use it in many of the pages but it contains some arguments.
You can see here
import 'package:flutter/material.dart';
class RequiredText extends StatefulWidget {
#override
_RequiredTextState createState() => _RequiredTextState();
}
class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
return Padding(
padding: const EdgeInsets.only(left: 18.0),
child: TextField(
cursorColor: ColorCursor,
style: TextStyle(
color: ColorField,
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
controller: myController,
decoration: InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(width: 1.5, color: ColorBorder)),
border: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.cyan[200]),
borderRadius: new BorderRadius.all(Radius.circular(20.0))),
helperText: HelperTextField,
labelText: LabelTextField,
labelStyle: TextStyle(
color: Colors.black26,
fontSize: 20.0,
fontFamily: 'DancingScript',
),
icon: Icon(
Icons.apps,
)),
),
);
}
}
But I want to use this in my main.dart class and other pages too.
But it is showing errors
import 'package:AllInOneCalci/CustomTextFields.dart';
import 'package:AllInOneCalci/customAppBar.dart';
import 'package:flutter/material.dart';
class BMICalcUI extends StatefulWidget {
#override
_BMICalcUIState createState() => _BMICalcUIState();
}
class _BMICalcUIState extends State<BMICalcUI> {
#override
Widget build(BuildContext context) {
double AppBarHeight = MediaQuery.of(context).size.height;
return Scaffold(
appBar: customAppBar(
height: (AppBarHeight / 3) * 0.4,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(top: 18.0),
child: Text(
'All In One Cali',
style: TextStyle(
color: Colors.black,
fontSize: 35.0,
fontFamily: 'DancingScript',
fontWeight: FontWeight.bold),
),
),
],
),
),
body: Padding(
padding: const EdgeInsets.only(top: 18.0),
child: Container(
width: 300.0,
child: Column(
children: [
RequiredText('Height', 'Input height in meters', Colors.cyan[200],
Colors.redAccent, Colors.redAccent),
],
),
),
),
);
}
}
Also I want to use this in many of my pages. Can you help me that how can I do this?
It would be very helpful to me. I am Stuck here
RequiredText('Height', 'Input height in meters', Colors.cyan[200],
Colors.redAccent, Colors.redAccent),
This line is showing error.
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
you mentioned the param but you didn't initialize it ,
do it in this way
class RequiredText extends StatefulWidget {
String LabelTextField;
String HelperTextField;
Color ColorBorder;
Color ColorField;
Color ColorCursor;
RequiredText(this.LabelTextField,this.HelperTextField,this.ColorBorder,this.ColorField,this.ColorCursor);
#override
_RequiredTextState createState() => _RequiredTextState();
}
class _RequiredTextState extends State<RequiredText> {
final myController = TextEditingController();
#override
void dispose() {
myController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 18.0),
child: TextField(
cursorColor: widget.ColorCursor,
style: TextStyle(
color: widget.ColorField,
),
keyboardType: TextInputType.number,
textInputAction: TextInputAction.next,
controller: myController,
decoration: InputDecoration(
enabledBorder: new OutlineInputBorder(
borderSide: BorderSide(width: 1.5, color: widget.ColorBorder)),
border: OutlineInputBorder(
borderSide: new BorderSide(color: Colors.cyan[200]),
borderRadius: new BorderRadius.all(Radius.circular(20.0))),
helperText: widget.HelperTextField,
labelText: widget.LabelTextField,
labelStyle: TextStyle(
color: Colors.black26,
fontSize: 20.0,
fontFamily: 'DancingScript',
),
icon: Icon(
Icons.apps,
)),
),
);
}
}