I am new in Flutter Development, I am practicing on an app of Airline Booking where user have to select a cabin of Airplane through tapping a button. So, I don't know the type of mentioned buttons and background functions, could anyone like to help me?
import 'package:flutter/material.dart';
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}
You can call onPressed method on ToggleButtons and use like
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
Full widget
class MyToogleButtons extends StatefulWidget {
const MyToogleButtons({Key? key}) : super(key: key);
#override
State<MyToogleButtons> createState() => _MyToogleButtonsState();
}
class _MyToogleButtonsState extends State<MyToogleButtons> {
List<bool> isSelected = [true, false, false];
#override
Widget build(BuildContext context) {
return ToggleButtons(
fillColor: Theme.of(context).primaryColor,
borderColor: Theme.of(context).primaryColor,
direction: Axis.horizontal,
isSelected: isSelected,
onPressed: (index) {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
setState(() {});
},
children: [
Container(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 6),
decoration: BoxDecoration(
color: Colors.transparent,
border: Border.all(
color: Theme.of(context).primaryColor,
)),
child: Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 32.0,
),
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
Text(
"Economy",
style: TextStyle(
fontWeight: FontWeight.w500,
fontSize: 12.0,
),
),
],
);
}
}
I'm getting this error called The named parameter 'key' is required, but there's no corresponding argument. I'm developing a simple BMI calculator app using flutter, android studio. didn't understand about the error I'm new to flutter. can anyone tell me what to do about this error? followed up this youtube video and the code is here github.
import 'package:bmi_cal/constants/app_constants.dart';
import 'package:bmi_cal/widgets/left_bar.dart';
import 'package:bmi_cal/widgets/right_bar.dart';
import 'package:flutter/material.dart';
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
TextEditingController _heightController = TextEditingController();
TextEditingController _weightController = TextEditingController();
double _bmiResult = 0;
String _textResult = "";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
"BMI Calculator",
style:
TextStyle(color: accentHexColor, fontWeight: FontWeight.w300),
),
backgroundColor: Colors.transparent,
elevation: 0,
centerTitle: true,
),
backgroundColor: mainHexColor,
body: SingleChildScrollView(
child: Column(
children: [
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 130,
child: TextField(
controller: _heightController,
style: TextStyle(
fontSize: 42,
fontWeight: FontWeight.w300,
color: accentHexColor),
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Height",
hintStyle: TextStyle(
fontSize: 42,
fontWeight: FontWeight.w300,
color: Colors.white.withOpacity(.8)),
),
),
),
Container(
width: 130,
child: TextField(
controller: _weightController,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 42,
fontWeight: FontWeight.w300,
color: accentHexColor),
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: InputBorder.none,
hintText: "Weight",
hintStyle: TextStyle(
fontSize: 42,
fontWeight: FontWeight.w300,
color: Colors.white.withOpacity(.8)),
),
),
),
],
),
SizedBox(
height: 30,
),
GestureDetector(
onTap: () {
double _h = double.parse(_heightController.text);
double _w = double.parse(_weightController.text);
setState(() {
_bmiResult = _w / (_h * _h);
if(_bmiResult > 25){
_textResult = "You\'re over weight";
} else if(_bmiResult >= 18.5 && _bmiResult <= 25){
_textResult = "You have normal weight";
}else{
_textResult = "You\'re under weight";
}
});
},
child: Container(
child: Text(
"Calculate",
style: TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: accentHexColor),
),
),
),
SizedBox(
height: 50,
),
Container(
child: Text(
_bmiResult.toStringAsFixed(2),
style: TextStyle(fontSize: 90, color: accentHexColor),
),
),
SizedBox(
height: 30,
),
Visibility(
visible: _textResult.isNotEmpty,
child: Container(
child: Text(
_textResult,
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w400,
color: accentHexColor),
),
)),
SizedBox(height: 10,),
LeftBar(barWidth: 40,),
SizedBox(height: 20,),
LeftBar(barWidth: 70),
SizedBox(height: 20,),
LeftBar(barWidth: 40,),
SizedBox(height: 20,),
RightBar(barWidth: 70),
SizedBox(height: 50,),
RightBar(barWidth: 70),
],
),
));
}
}
main.dart
import 'package:bmi_cal/screens/home.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BMI calculator',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.yellow,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeScreen(),
);
}
}
This error normally indicates, that the widget you are trying to add to the widget tree does have a constructor similar to the following:
const LeftBar({required Key key, #required this.barWidth}) : super(key: key);
The error seems to be related to the first required argument with the name key. Just remove the required keyword, since it the key is mostly needed for testing the widget and should be optional.
I checked your source code on github and I dont think it is up to date for this example.
enter image description here
You have to just try this:
Add "VoidCallback" instead of "Function" onpress.
Remove # sign
Add required keyword
for detail see the below picture
enter image description here
======== Exception caught by widgets library =======================================================
The following assertion was thrown building UserResult(dirty):
A non-null String must be provided to a Text widget.
'package:flutter/src/widgets/text.dart':
Failed assertion: line 378 pos 10: 'data != null'
Here below is my full code I don't know on which Text Widget I fix it.
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:nethouese/pages/imported/models/user.dart';
import 'package:nethouese/pages/imported/widgets/ProgressWidget.dart';
class SearchPage extends StatefulWidget {
#override
_SearchPageState createState() => _SearchPageState();
}
class _SearchPageState extends State<SearchPage>with AutomaticKeepAliveClientMixin<SearchPage>
{
final userReference= FirebaseFirestore.instance.collection('agent');
TextEditingController searchtextEditingController= TextEditingController();
Future<QuerySnapshot>futureSearchResults;
clearFormfield(){
searchtextEditingController.clear();
}
//searching process this method searches and fetechs data from agents collection
controllSearching(String str){
Future<QuerySnapshot>allUsers=userReference.where("profileName", isGreaterThanOrEqualTo:str).get();
setState(() {
futureSearchResults=allUsers;
});
}
AppBar searchPageHeader(){
return AppBar(
backgroundColor: Colors.teal.shade900,
title: TextFormField(
style: TextStyle(
fontSize: 18, color: Colors.white,),
controller: searchtextEditingController,
decoration: InputDecoration(
fillColor: Colors.red,
hintText: "search here",
hintStyle: TextStyle(color: Colors.grey),
enabledBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.grey),
),
focusedBorder: UnderlineInputBorder(
borderSide: BorderSide(color: Colors.white),
),
prefixIcon: Icon(Icons.person_pin, color: Colors.white,size: 30.0,),
suffix: IconButton(icon: Icon(Icons.clear),color: Colors.white,onPressed:clearFormfield,)
),
onFieldSubmitted: controllSearching,
),
);
}
Container DispalyNoSearchResult(){
final Orientation orientation= MediaQuery.of(context).orientation;
return Container(
child: Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[
Icon(Icons.group,color: Colors.grey,size: 60,),
Text(
"Search User",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,fontWeight: FontWeight.w300,fontSize: 50.0,
),)
],
),
),
);
}
displayAllUser(){
return FutureBuilder(
future: futureSearchResults,
builder: (context ,dataSnapshot){
if (!dataSnapshot.hasData || dataSnapshot.data.docs.isEmpty) {
return circularProgress();
}
List<UserResult>searchUserResult=[];
dataSnapshot.data.docs.forEach((docs){
agent eachuser=agent.fromDocument(docs);
UserResult userResult= UserResult(eachuser);
searchUserResult.add(userResult);
});
return ListView(children: searchUserResult);
},
);
}
bool get wantKeepAlive=>true;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white10,
appBar: searchPageHeader(),
body: futureSearchResults==null? DispalyNoSearchResult():displayAllUser(),
);
}
}
class UserResult extends StatelessWidget {
final agent eachuser;
UserResult(this.eachuser);
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.all(3.0),
child: Container(
color: Colors.white54,
child: Column(
children: <Widget>[
GestureDetector(
onTap: (){print("tabbled");},
child: ListTile(
// leading: CircleAvatar(
// backgroundColor: Colors.black,
// backgroundImage: CachedNetworkImageProvider(eachuser.url),
//
// ),
title:Text(
eachuser.profileName,
style:TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
// subtitle: Text(eachuser.username,style:TextStyle(
// color: Colors.black,
// fontSize: 13.0,
// fontWeight: FontWeight.bold,
//
// )),
),
)
],
),
),
);
}
}
The Text widget did not allow the null value to display. You have to check whether the value is null or not before using it in Text widget. Modify the below codes in inside your UserResult class and check.
Text(eachuser?.profileName ?? ' ',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
I am building a form using the "Flutter Form Builder" package 4.0.2 and trying to add two fields where users enter "tags" via the "material_tag_editor" package 0.0.6
The Problem: when then form is submitted by pressing the "Post" button, neither of the data submitted for those "tag" form fields (Q1 or Q3) is included (see screenshot of the console below).
Notice the line "flutter: {qFour: 30, qFive: sample answer to q5, qTen: sample answer to q10}" - neither Q1 nor Q3 are included (I added their data in separate print statements, so you see them in the console - look for the >>> lines).
Here are screenshots of the form with sample tags entered (iPhone simulator screenshot), and the bottom of the form with the button:
Here's the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/painting.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:streakers_journal_beta/screens/reviews_screen.dart';
import 'package:streakers_journal_beta/screens/welcome_screen.dart';
import 'package:streakers_journal_beta/models/user.dart';
import 'package:rflutter_alert/rflutter_alert.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';
// BEGIN code from material_tag_editor
import 'package:material_tag_editor/tag_editor.dart';
import 'package:material_tag_editor/tag_editor_layout_delegate.dart';
import 'package:material_tag_editor/tag_layout.dart';
import 'package:material_tag_editor/tag_render_layout_box.dart';
// END code from material_tag_editor
//import 'dart:html';
//import 'dart:convert';
// This is the stateful widget that the main application instantiates, per https://api.flutter.dev/flutter/widgets/Form-class.html
class SandboxWriteReviewScreen extends StatefulWidget {
// BEGIN code from material_tag_editor
final String title = 'Material Tag Editor Demo';
// END code from material_tag_editor
#override
_SandboxWriteReviewScreenState createState() =>
_SandboxWriteReviewScreenState();
}
// This is the private State class that goes with WriteReviewScreen
class _SandboxWriteReviewScreenState extends State<SandboxWriteReviewScreen> {
var data;
AutovalidateMode autovalidateMode = AutovalidateMode.always;
bool readOnly = false;
bool showSegmentedControl = true;
//final _newFormbuilderKey = GlobalKey<FormState>();
final _newnewFormbuilderKey = GlobalKey<FormBuilderState>();
// above "GlobalKey" lets us generate a unique, app-wide ID that we can associate with our form, per https://fluttercrashcourse.com/blog/realistic-forms-part1
final ValueChanged _onChanged = (val) => print(val);
// BEGIN related to FormBuilderTextField in form below
final _ageController = TextEditingController(text: '45');
bool _ageHasError = false;
// END related to FormBuilderTextField in form below
String qEleven;
String qTwelve;
// BEGIN code from material_tag_editor
List<String> qOne = [];
final FocusNode _focusNode = FocusNode();
onDelete(index) {
setState(() {
qOne.removeAt(index);
});
}
// below = reiteration for cons
List<String> qThree = [];
//final FocusNode _focusNode = FocusNode();
uponDelete(index) {
// NOTE: "uponDelete" for cons vs. "onDelete" for pros
setState(() {
qThree.removeAt(index);
});
}
// END code from material_tag_editor
//final _user = User();
List<bool> isSelected;
int starIconColor =
0xffFFB900; // was 0xffFFB900; 0xffD49428 is from this image: https://images.liveauctioneers.com/houses/logos/lg/bartonsauction550_large.jpg?auto=webp&format=pjpg&width=140
#override
void initState() {
//isSelected = [true, false];
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: [
Padding(
padding: EdgeInsets.only(right: 12.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(Icons.keyboard_backspace),
onPressed: () {
Navigator.pop(context);
},
),
Text(
'back',
style: TextStyle(
fontSize: 7,
),
),
],
),
),
],
leading: Icon(
Icons.rate_review,
color: Colors.black54,
),
title: Column(
children: [
Text(
'SANDBOX Write a Review',
style: TextStyle(
color: Colors.white,
fontSize: 16,
),
),
SizedBox(
height: 6.0,
),
Text(
'flutter_form_builder ^4.0.2',
style: TextStyle(
color: Colors.limeAccent,
fontSize: 14,
),
),
SizedBox(
height: 6.0,
),
],
),
// BEGIN appBar gradient code, per https://medium.com/flutter-community/how-to-improve-your-flutter-application-with-gradient-designs-63180ba96124
flexibleSpace: Container(
decoration: BoxDecoration(
color: Colors.indigoAccent,
),
),
backgroundColor: Colors.white,
centerTitle: false,
),
body: SingleChildScrollView(
child: Container(
child: Builder(
builder: (context) => FormBuilder(
// was "builder: (context) => Form("
key: _newnewFormbuilderKey,
initialValue: {
'date': DateTime.now(),
},
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 12.0,
),
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'Q1 via TagEditor', // was 'What are 3 good or positive things about the house, property or neighborhood?', // [ 1 ]
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text: ' (optional)',
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
// BEGIN code from material_tag_editor
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: TagEditor(
length: qOne.length,
delimiters: [
','
], // was delimiters: [',', ' '], Also tried "return" ('\u2386',) and '\u{2386}'
hasAddButton: true,
textInputAction: TextInputAction
.next, // moves user from one field to the next!!!!
autofocus: false,
maxLines: 1,
// focusedBorder: OutlineInputBorder(
// borderSide: BorderSide(color: Colors.lightBlue),
// borderRadius: BorderRadius.circular(20.0),
// ),
inputDecoration: const InputDecoration(
// below was "border: InputBorder.none,"
isDense: true,
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlue),
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
// above is per https://github.com/flutter/flutter/issues/5191
),
labelText: 'separate, with, commas',
labelStyle: TextStyle(
fontStyle: FontStyle.italic,
backgroundColor:
Color(0x65dffd02), // was Color(0xffDDFDFC),
color: Colors.black87, // was Color(0xffD82E6D),
fontSize: 14,
),
),
onTagChanged: (value) {
setState(() {
qOne.add(value);
});
},
tagBuilder: (context, index) => _Chip(
index: index,
label: qOne[index],
onDeleted: onDelete,
),
),
),
// END code from material_tag_editor
SuperDivider(),
// END Chips Input
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'Q3 via TagEditor (skipped Q2, for simplicity)', // [ 2 ] was 'List up to 3 negatives, or things you don’t like, about the house, property or neighborhood:',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text: '(optional)', // was text: '\n(optional)',
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
backgroundColor:
Color(0x70DDFDFC), // was Color(0x30F8A0A2),
color: Colors.black54, // was Color(0xffD82E6D),
//color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
// BEGIN code from material_tag_editor
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: TagEditor(
length: qThree.length,
delimiters: [','], // was delimiters: [',', ' '],
hasAddButton: true,
textInputAction: TextInputAction
.next, // moves user from one field to the next!!!!
autofocus: false,
maxLines: 1,
// focusedBorder: OutlineInputBorder(
// borderSide: BorderSide(color: Colors.lightBlue),
// borderRadius: BorderRadius.circular(20.0),
// ),
inputDecoration: const InputDecoration(
// below was "border: InputBorder.none,"
isDense: true,
border: OutlineInputBorder(
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlue),
borderRadius: const BorderRadius.all(
const Radius.circular(20.0),
),
// above is per https://github.com/flutter/flutter/issues/5191
),
labelText: 'separate, with, commas',
labelStyle: TextStyle(
fontStyle: FontStyle.italic,
backgroundColor:
Color(0x65dffd02), // was Color(0xffDDFDFC),
color: Colors.black87, // was Color(0xffD82E6D),
fontSize: 14,
),
),
onTagChanged: (value) {
setState(() {
qThree.add(value);
});
},
tagBuilder: (context, index) => _Chip(
index: index,
label: qThree[index],
onDeleted: uponDelete,
),
),
),
// END code from material_tag_editor
SuperDivider(),
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'Q4 - via FormBuilder\'s FormBuilderRadioGroup', // [ 3 ]
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text: ' (required)',
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.red[700],
), // was 'misleading or inaccurate?',
),
],
),
),
FormBuilderRadioGroup(
name: 'qFour',
decoration: const InputDecoration(
border: InputBorder.none,
labelStyle: TextStyle(fontStyle: FontStyle.italic),
),
wrapVerticalDirection: VerticalDirection.down,
// orientation: GroupedRadioOrientation.vertical,
orientation: OptionsOrientation.vertical,
onChanged: _onChanged,
options: [
FormBuilderFieldOption(
value: '0', child: Text('Never')),
FormBuilderFieldOption(
value: '30', child: Text('Within the last month')),
FormBuilderFieldOption(
value: '180',
child: Text('Within the last 6 months')),
FormBuilderFieldOption(
value: '181',
child: Text('More than 6 months ago')),
],
),
SuperDivider(),
Center(
child: RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'Q5 - via FormBuilder\'s FormBuilderTextField', // [ 4 ]
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text: ' (optional)',
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
),
GavTextField(
maxCharLength: 200,
fieldAttribute: 'qFive',
fieldLabelText: '',
),
SuperDivider(),
RichText(
text: TextSpan(
style: TextStyle(
color: Colors.blue,
),
children: <TextSpan>[
TextSpan(
text:
'Q10 - via FormBuilder\'s FormBuilderTextField (skipped Q6 - Q9, for simplicity)', // [ 9 ]
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 16.0,
),
),
TextSpan(
text: ' (optional)',
style: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 14.0,
color: Colors.black54,
), // was 'misleading or inaccurate?',
),
],
),
),
GavTextField(
maxCharLength: 1200,
fieldAttribute: 'qTen',
fieldLabelText:
'Be honest & kind.', // was 'Be honest, but kind.',
),
SuperDivider(),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
primary: Colors.purple,
padding: EdgeInsets.symmetric(
horizontal: 50, vertical: 20),
textStyle: TextStyle(
fontSize: 20, fontWeight: FontWeight.bold)),
onPressed: () {
_newnewFormbuilderKey.currentState.save();
if (_newnewFormbuilderKey.currentState
.validate()) {
print(_newnewFormbuilderKey.currentState.value);
print(
' >>> Q1\'s value via separate print: {$qOne}',
);
print(
' >>> Q3\'s value via separate print: {$qThree}',
);
} else {
print("validation failed");
}
},
child: Text(
'Post',
style: TextStyle(
color: Colors.white,
fontSize: 20,
),
),
),
],
),
),
SizedBox(
height: 200.0,
),
],
),
),
),
),
),
),
);
}
}
class GavTextField extends StatelessWidget {
GavTextField(
{#required this.maxCharLength,
#required this.fieldAttribute,
#required this.fieldLabelText});
int maxCharLength;
String fieldAttribute;
String fieldLabelText;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 16.0),
child: FormBuilderTextField(
name: '$fieldAttribute',
// BEGIN countdown to max number of characters, per https://stackoverflow.com/a/64035861/1459653
maxLength: maxCharLength,
maxLines: null,
buildCounter: (
BuildContext context, {
int currentLength,
int maxLength,
bool isFocused,
}) {
return Text(
'${maxLength - currentLength}',
);
},
// END countdown to max number of characters, per https://stackoverflow.com/a/64035861/1459653
decoration: InputDecoration(
labelText:
'$fieldLabelText', // was " Separate items, with, commas",
//counterText: _textController.text.length.toString(),
labelStyle: TextStyle(
fontSize: 12.5,
fontStyle: FontStyle.italic,
),
//helperText: 'Separate, with, commas',
//floatingLabelBehavior: ,
// filled: true,
// fillColor: Colors.lightBlue.withOpacity(0.05),
// BEGIN change border if focus
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(color: Colors.lightBlue),
borderRadius: BorderRadius.circular(20.0),
),
// END change border if focus
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: BorderSide(),
),
),
textInputAction:
TextInputAction.next, // moves user from one field to the next!!!!
autofocus:
false, // on screen load, first text field is already active - user can just start typing
),
);
}
} //</formstate>`
var alertStyle = AlertStyle(
animationType: AnimationType.fromTop,
isCloseButton: true,
isOverlayTapDismiss: true,
descTextAlign: TextAlign.start,
alertBorder: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
side: BorderSide(
color: Colors.grey,
),
),
titleStyle: TextStyle(
fontWeight: FontWeight.normal,
fontStyle: FontStyle.italic,
fontSize: 16,
color: Colors.black54,
),
alertAlignment: Alignment.topCenter,
);
// BEGIN code from material_tag_editor
class _Chip extends StatelessWidget {
const _Chip({
#required this.label,
#required this.onDeleted,
#required this.index,
});
final String label;
final ValueChanged<int> onDeleted;
final int index;
#override
Widget build(BuildContext context) {
return Chip(
backgroundColor: Colors.blueGrey.shade100,
labelPadding: const EdgeInsets.only(left: 8.0),
label: Text(label),
deleteIcon: Icon(
Icons.cancel_rounded, // was "Icons.close,"
size: 18,
),
onDeleted: () {
onDeleted(index);
},
);
}
}
// END code from material_tag_editor
class SuperDivider extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(
top: 4.0,
bottom: 4.0,
),
child: const Divider(
color: Colors.white70,
height: 30,
thickness: 0.1,
indent: 0,
endIndent: 0,
),
);
}
}
Flutter form builder assumes that only form children's will be used which automatically updates ancestor form whenever their value is changed. But since tag builder is not a form widget, you can do two things -
Wrap these widgets inside a new form widget, whose responsibility will be to only send updates to the ancestor form and render its child.
You can do something like
class GenericFormWidget<T> extends StatefulWidget {
GenericFormWidget({
Key key,
#required this.attribute,
#required this.builder,
}) : super(key: key);
final String attribute;
final Function(BuildContext, Function(T value)) builder;
#override
Widget build(BuildContext context) {
return widget.builder(context, _updateValue);
}
void _updateValue(T value) =>
_formState.setAttributeValue(widget.attribute, value);
}
Instead of using flutter form builder, you can have use Flutter form and create your own field UI using material widgets. This will be costly for you since you will need to migrate existing fields too.
I have a PayBills() widget screen = that has 2 tabs which each display a separate tab dart file which I've specified, but I get a huge grey circle in the background of the first dart file and I get nothing in the second tab, but I don't know where the issue is.
PayBills() widget screen code :
import 'package:flutter/material.dart';
import '../../constans/constants.dart';
import 'first_tab.dart';
import 'second_tab.dart';
class PayBills extends StatefulWidget {
#override
_PayBillsState createState() => _PayBillsState();
}
class _PayBillsState extends State<PayBills>
with SingleTickerProviderStateMixin {
TabController _controller;
#override
void initState() {
super.initState();
_controller = TabController(vsync: this, length: 2);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
centerTitle: true,
elevation: 0,
title: Text(
'تسديد فاتورة',
style: TextStyle(
color: leaderLogo,
fontSize: 24,
fontFamily: 'Calibri',
),
),
bottom: TabBar(
controller: _controller,
tabs: [
Tab(
child: Text(
'فواتير مستحقة',
style: TextStyle(
fontFamily: 'Calibri',
fontSize: 14,
color: Colors.black,
),
),
),
Tab(
child: Text(
'فواتير مدفوعة',
style: TextStyle(
fontFamily: 'Calibri',
fontSize: 14,
color: Colors.black,
),
),
),
],
),
),
body: TabBarView(
controller: _controller,
children: [
PayBillsList(),
SecondTab(),
],
));
}
}
first_tab widget code :
import 'package:flutter/material.dart';
import '../../constans/constants.dart';
class BillDetails extends StatelessWidget {
final String billName;
final String billImage;
final String billDate;
const BillDetails({Key key, this.billName, this.billImage, this.billDate})
: super(key: key);
#override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(
top: 20,
right: 5,
left: 5,
),
width: 378,
height: 93,
decoration: BoxDecoration(
border: Border.all(
color: Colors.grey,
),
borderRadius: BorderRadius.circular(5),
),
child: ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage(billImage),
backgroundColor: Colors.white,
),
title: Text(
billName,
style: TextStyle(
fontFamily: 'Calibri',
fontSize: 16,
color: Colors.black,
),
),
subtitle: Text(
billDate,
style: TextStyle(
fontFamily: 'Calibri',
fontSize: 12,
color: Colors.black,
),
),
trailing: RaisedButton(
color: raisedButtonColor,
onPressed: () {},
child: Text(
"دفع",
style: TextStyle(
color: Colors.white,
),
),
),
));
}
}
class PayBillsList extends StatelessWidget {
final List<BillDetails> billsList = [
BillDetails(
billName: 'فاتورة كهرباء',
billImage: 'assets/images/electricity.png',
billDate: '30 / 4 / 2020',
),
BillDetails(
billName: 'فاتورة مياه',
billImage: 'assets/images/water.png',
billDate: '30 / 4 / 2020',
),
];
#override
Widget build(BuildContext context) {
return Container(
width: 378,
height: 93,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
shape: BoxShape.circle,
),
child: ListView.builder(
itemBuilder: (context, index) {
return BillDetails(
billName: billsList.elementAt(index).billName,
billImage: billsList.elementAt(index).billImage,
billDate: billsList.elementAt(index).billDate,
);
},
shrinkWrap: true,
itemCount: billsList.length,
scrollDirection: Axis.vertical,
),
);
}
}
class PayButton extends StatelessWidget {
#override
Widget build(BuildContext context) {
return ButtonTheme(
minWidth: 20,
height: 20,
child: RaisedButton(
onPressed: () {},
color: raisedButtonColor,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Center(
child: Text(
//Login button text properties
'دفع',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontFamily: 'Calibri',
)),
),
),
);
}
}
You used a circle shape for BoxDecoration. Comment this line:
shape: BoxShape.circle,
Container(
width: 378,
height: 93,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Colors.grey,
),
// shape: BoxShape.circle,
),