How to add trailng icon in radio list tile flutter - flutter

I am using the RadioListTile for displaying the dynamic data with radio button in flutter,but I want to display the same list with an trailing icon for editing the list data.
Can you please help me how to do that in flutter?
RadioListTile(
groupValue: _currentIndex,
title: Text(
// addres["address_1"],
addres["firstname"] +
addres["lastname"] +
addres["address_1"] +
addres["city"] +
addres["country"],
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
value: int.parse(addres["address_id"]),
onChanged: (val) {
setState(() {
_currentIndex = val;
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => PickanAddresspage(selected_address: addres['address_id'],)));
});
},
)

In title , you can user Row to wrap Text and Icon
Use Expanded and flex to control width you need
code snippet
title: Row(
children: <Widget>[
Expanded(
flex: 3,
child: Text(
"firstname" +
"lastname" +
"address_1" +
"city" +
"country234123412344523523452542345234523523542345245234523452345235234523452345245234523452452542",
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
),
Expanded(
flex: 1,
child: InkWell(
child: Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
),
)
],
)
full test code
// Flutter code sample for
// ![RadioListTile sample](https://flutter.github.io/assets-for-api-docs/assets/material/radio_list_tile.png)
//
// This widget shows a pair of radio buttons that control the `_character`
// field. The field is of the type `SingingCharacter`, an enum.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
/// This Widget is the main application widget.
class MyApp extends StatelessWidget {
static const String _title = 'Flutter Code Sample';
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: MyStatefulWidget(),
),
);
}
}
enum SingingCharacter { lafayette, jefferson }
class MyStatefulWidget extends StatefulWidget {
MyStatefulWidget({Key key}) : super(key: key);
#override
_MyStatefulWidgetState createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
SingingCharacter _character = SingingCharacter.lafayette;
#override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
RadioListTile<SingingCharacter>(
title: const Text('Lafayette'),
value: SingingCharacter.lafayette,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
RadioListTile<SingingCharacter>(
title: Row(
children: <Widget>[
Expanded(
flex: 3,
child: Text(
"firstname" +
"lastname" +
"address_1" +
"city" +
"country234123412344523523452542345234523523542345245234523452345235234523452345245234523452452542",
overflow: TextOverflow.ellipsis,
maxLines: 3,
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
),
Expanded(
flex: 1,
child: InkWell(
child: Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
),
),
)
],
),
value: SingingCharacter.jefferson,
groupValue: _character,
onChanged: (SingingCharacter value) {
setState(() {
_character = value;
});
},
),
],
);
}
}

Related

when i typing in flutter textfield it type in backward direction how to solve it?

I have one page of technical skill and I want to add new textfield on onatap and get the value of it and remove that skill on ontap of delete button and this is working now but only problem was that the when i am typing in textfield its typing in backward direction(right to left i want to type left to right.)
import 'package:flutter/material.dart';
class Technical extends StatefulWidget {
const Technical({Key? key}) : super(key: key);
#override
State<Technical> createState() => _TechnicalState();
}
class _TechnicalState extends State<Technical> {
List<String> skill = <String>[];
List<TextEditingController> mycontroller = <TextEditingController>[];
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
centerTitle: true,
elevation: 0,
backgroundColor: Colors.blue,
title: const Text(
'Technical Skills',
),
),
body: Column(
children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Enter Your Skills',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
...skill
.map(
(e) => Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: TextField(
enableInteractiveSelection: true,
controller: TextEditingController(text: e),
onChanged: (String value) {
setState(() {
skill[skill.indexOf(e)] = value;
});
},
),
),
IconButton(
onPressed: () {
setState(() {
skill.remove(e);
mycontroller.clear();
print(e);
});
},
icon: const Icon(Icons.delete))
],
),
)
.toList(),
Center(
child: Text(
'$skill',
style: const TextStyle(fontSize: 30),
),
),
const Spacer(),
OutlinedButton(
onPressed: () {
setState(() {
skill.add("");
});
},
child: const Icon(Icons.add),
),
],
),
);
}
}
The issue is you are creating new controller on every state change, the cursor position is not handling in this.
So the solution will we
controller: TextEditingController.fromValue(
TextEditingValue(
text: e,
selection: TextSelection(
baseOffset: e.length,
extentOffset: e.length,
)),
),
With controller
class _TechnicalState extends State<Technical> {
List<String> skill = <String>[];
List<TextEditingController> mycontroller = <TextEditingController>[];
#override
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
centerTitle: true,
elevation: 0,
backgroundColor: Colors.blue,
title: const Text(
'Technical Skills',
),
),
body: Column(
children: [
const Align(
alignment: Alignment.centerLeft,
child: Text(
'Enter Your Skills',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
),
for (int i = 0; i < mycontroller.length; i++) row_build(i),
Center(
child: Text(
'$skill',
style: const TextStyle(fontSize: 30),
),
),
const Spacer(),
OutlinedButton(
onPressed: () {
mycontroller.add(TextEditingController());
setState(() {
skill.add("");
});
},
child: const Icon(Icons.add),
),
],
),
);
}
Row row_build(int i) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
SizedBox(
width: 100,
child: TextField(
enableInteractiveSelection: true,
controller: mycontroller[i],
onChanged: (String value) {
setState(() {
skill[i] = value;
});
},
),
),
IconButton(
onPressed: () {
setState(() {
skill.remove(skill[i]);
mycontroller.removeAt(i);
});
},
icon: const Icon(Icons.delete))
],
);
}
}
The textfield works fine for me (left to right)
Check your code if the textDirection property is set correctly to TextDirection.ltr instead of TextDirection.rtl
child: TextField(
textDirection: TextDirection.ltr,

Flutter how to user hint and value DropdownButton

While coding an app i realized, that if you use a hint: with the DropdownButton and a value you only see the value. After some research and trying to work my way around it i finally found a solution. Idk if this is helpful or not but i wanted to share this with you and maybe it does help you in your own project. But without further ado here is the "not functional code":
import 'package:flutter/material.dart';
void main() => runApp(const ButtonClass());
class ButtonClass extends StatefulWidget {
const ButtonClass({Key? key}) : super(key: key);
#override
State<ButtonClass> createState() => _ButtonClassState();
}
class _ButtonClassState extends State<ButtonClass> {
List<DropdownMenuItem<String>> get dropdownItems {
List<DropdownMenuItem<String>> menuItems = [
const DropdownMenuItem(child: Text("One"), value: "Option1"),
const DropdownMenuItem(child: Text("Two"), value: "Option2"),
const DropdownMenuItem(
child: Text("Three"),
value: "Option3",
),
const DropdownMenuItem(
child: Text("Four"),
value: "Option4",
),
const DropdownMenuItem(
child: Text("Five"),
value: "Option5",
),
];
return menuItems;
}
String selectedValue = "Option1";
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200.0,
height: 200.0,
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: const Center(
child: FittedBox(
fit: BoxFit.contain,
child: Text(
"Displayed Text",
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontFamily: 'Arial',
),
),
),
),
items: dropdownItems,
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
},
),
),
),
),
),
);
}
}
And here is the solution:
Change the
String selectedValue = "Option1";
to (example)
String? _selectedColor;
and also change
value: selectedValue,
onChanged: (String? newValue) {
setState(() {
selectedValue = newValue!;
});
},
to
value: _selectedColor,
onChanged: (String? newValue) {
setState(() {
_selectedColor= newValue!;
});
},
Here is the full main.dart file:
import 'package:flutter/material.dart';
void main() => runApp(const ButtonClass());
class ButtonClass extends StatefulWidget {
const ButtonClass({Key? key}) : super(key: key);
#override
State<ButtonClass> createState() => _ButtonClassState();
}
class _ButtonClassState extends State<ButtonClass> {
List<DropdownMenuItem<String>> get dropdownItems {
List<DropdownMenuItem<String>> menuItems = [
const DropdownMenuItem(child: Text("One"), value: "Option1"),
const DropdownMenuItem(child: Text("Two"), value: "Option2"),
const DropdownMenuItem(
child: Text("Three"),
value: "Option3",
),
const DropdownMenuItem(
child: Text("Four"),
value: "Option4",
),
const DropdownMenuItem(
child: Text("Five"),
value: "Option5",
),
];
return menuItems;
}
String? _selectedColor;
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
width: 200.0,
height: 200.0,
child: DropdownButtonHideUnderline(
child: DropdownButton(
isExpanded: true,
hint: const Center(
child: FittedBox(
fit: BoxFit.contain,
child: Text(
"Displayed Text",
style: TextStyle(
color: Colors.black,
fontSize: 30.0,
fontFamily: 'Arial',
),
),
),
),
items: dropdownItems,
value: _selectedColor,
onChanged: (String? newValue) {
setState(() {
_selectedColor = newValue!;
});
},
),
),
),
),
),
);
}
}

Bottom overflow while having multiple line item in dropdown flutter

I have multiple line items in the dropdown menu in flutter like this :
It is shown perfectly fine in the dropdown pop up but in dropdown button it shows bottomoverflow like this :
Here is code for the same :
DropdownButtonHideUnderline(
child: DropdownButton(
items: addresses.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: SizedBox(
height: 10 * SizeConfig.heightMultiplier,
child: Column(
children: [
SizedBox(height: 1.5 * SizeConfig.heightMultiplier),
new Text(value, overflow: TextOverflow.clip),
SizedBox(height: 1.5 * SizeConfig.heightMultiplier),
],
),
),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_selectedShippingAddress = newValue;
});
},
hint: Text("Select address"),
selectedItemBuilder: (BuildContext context) {
return addresses.map<Widget>((String item) {
return Container(
child: Text(item),
);
}).toList();
},
style: TextStyle(
fontSize: 1.9 *
SizeConfig.textMultiplier,
color:
Theme.of(context).accentColor,
fontFamily: 'Montserrat'),
value: _selectedShippingAddress,
isExpanded: true,
underline: Container(
height: 1,
color: Theme.of(context)
.textSelectionColor,
),
icon: Icon(Icons.arrow_drop_down),
isDense: true,
),
)
So what is a solution for this? Can anyone help on this?
From the example that you provided I replicated it and there is a problem in the blow code
DropdownMenuItem<String>(
value: value,
child: SizedBox(
height: 10 * SizeConfig.heightMultiplier,
Maybe the height is doing some problem just added a sample example below to let you know the things work.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: SampleApp(),
debugShowCheckedModeBanner: false,
);
}
}
class SampleApp extends StatefulWidget {
#override
_SampleAppState createState() => _SampleAppState();
}
class _SampleAppState extends State<SampleApp> {
String _selectedShippingAddress;
List addresses = ['sample1', 'sample 2'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Your heading'),
),
body: DropdownButtonHideUnderline(
child: DropdownButton<String>(
items: addresses.map((value) {
return new DropdownMenuItem<String>(
value: value,
child: SizedBox(
child: Column(
children: [
SizedBox(height: 5),
new Text(value, overflow: TextOverflow.clip),
SizedBox(height: 5),
],
),
),
);
}).toList(),
onChanged: (String newValue) {
setState(() {
_selectedShippingAddress = newValue;
});
},
hint: Text("Select address"),
selectedItemBuilder: (BuildContext context) {
return addresses.map<Widget>((item) {
return Container(
child: Text(item),
);
}).toList();
},
style: TextStyle(
fontSize: 14,
color: Theme.of(context).accentColor,
fontFamily: 'Montserrat'),
value: _selectedShippingAddress,
isExpanded: true,
underline: Container(
height: 1,
color: Theme.of(context).textSelectionColor,
),
icon: Icon(Icons.arrow_drop_down),
isDense: true,
),
));
}
}

Flutter - Expandable text not working properly with overflow property

Basically I want to achieve exactly the same thing as Flutter: How to hide or show more text within certain length.
Here is my code snippet.
LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final TextSpan span = TextSpan(
text: text,
style: TextStyle(
fontSize: 13,
),
);
final TextPainter textPainter = TextPainter(
text: span,
maxLines: 1,
ellipsis: '...',
textDirection: TextDirection.ltr,
);
textPainter.layout(maxWidth: constraints.maxWidth);
if (textPainter.didExceedMaxLines)
return Row(
crossAxisAlignment: _basicInformationIsExpanded
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
child: Text(
text,
style: TextStyle(
fontSize: 13,
),
maxLines: _isExpanded ? null : 1,
//overflow: TextOverflow.ellipsis,
),
),
GestureDetector(
child: _isExpanded
? Icon(
Icons.expand_less,
)
: Icon(
Icons.expand_more,
),
onTap: () {
setState(() => _isExpanded =
!_isExpanded);
},
),
],
);
else
return Text(
text,
style: TextStyle(
fontSize: 13,
),
);
}),
The weird thing is if I comment overflow: TextOverflow.ellipsis,, everything is fine. But I need to show the ellipsis and if I add that line, the text doesn't expand when I click the icon.
Can anyone help me with it? Thanks.
You can copy paste run full code below
You can set overflow based on _isExpanded
overflow: _isExpanded ? null : TextOverflow.ellipsis,
working demo
full code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
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;
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>[
Container(
width: 200,
child: ExpandText(
text: "long string" * 10,
)),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class ExpandText extends StatefulWidget {
String text;
ExpandText({this.text});
#override
_ExpandTextState createState() => _ExpandTextState();
}
class _ExpandTextState extends State<ExpandText> {
bool _isExpanded = false;
bool _basicInformationIsExpanded = true;
#override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (BuildContext context, BoxConstraints constraints) {
final TextSpan span = TextSpan(
text: widget.text,
style: TextStyle(
fontSize: 13,
),
);
final TextPainter textPainter = TextPainter(
text: span,
maxLines: 1,
ellipsis: '...',
textDirection: TextDirection.ltr,
);
textPainter.layout(maxWidth: constraints.maxWidth);
if (textPainter.didExceedMaxLines) {
print("exceed");
return Row(
crossAxisAlignment: _basicInformationIsExpanded
? CrossAxisAlignment.end
: CrossAxisAlignment.start,
children: <Widget>[
Expanded(
flex: 1,
child: Text(
widget.text,
style: TextStyle(
fontSize: 13,
),
maxLines: _isExpanded ? null : 1,
overflow: _isExpanded ? null : TextOverflow.ellipsis,
),
),
GestureDetector(
child: _isExpanded
? Icon(
Icons.expand_less,
)
: Icon(
Icons.expand_more,
),
onTap: () {
setState(() => _isExpanded = !_isExpanded);
},
),
],
);
} else {
print("not exceed");
return Text(
widget.text,
style: TextStyle(
fontSize: 13,
),
);
}
});
}
}
A long ago i stumbled onto same thing, surely using these widget's is a way to do this,
but here is the code which i wrote and its totally customizable.
You can change the limit variable to use it accordinly
class QNAContainer extends StatefulWidget {
final String ques;
final String answer;
QNAContainer({#required this.ques, #required this.answer});
#override
_QNAContainerState createState() => _QNAContainerState();
}
class _QNAContainerState extends State<QNAContainer> {
String truncAns;
bool showingAll = false;
int limit = 80;
#override
void initState() {
super.initState();
if (widget.answer.length > limit ) {
print("truncc");
truncAns = widget.answer.toString().substring(0, limit) + '...';
} else {
truncAns = widget.answer;
}
}
#override
Widget build(BuildContext context) {
ScreenUtil.instance = ScreenUtil(
width: Styles.get_width(context),
height: Styles.get_height(context),
allowFontScaling: true);
return Container(
width: double.infinity,
padding: EdgeInsets.symmetric(horizontal: ScreenUtil().setWidth(10), vertical: ScreenUtil().setHeight(10)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: AppColors.greyFillColor.withOpacity(0.6),
),
margin: EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(7)),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.ques,
style: TextStyle(
fontSize: ScreenUtil().setHeight(14),
fontWeight: FontWeight.bold,
)),
SizedBox(height: ScreenUtil().setHeight(5)),
Text(showingAll ? widget.answer : truncAns,
style: TextStyle(
fontSize: ScreenUtil().setHeight(14),
)),
SizedBox(height: ScreenUtil().setHeight(5)),
truncAns.contains('...')
? GestureDetector(
onTap: () {
setState(() {
showingAll = !showingAll;
});
},
child: Align(
alignment: Alignment.centerRight,
child: Container(
margin: EdgeInsets.only(bottom: ScreenUtil().setHeight(5)),
padding: EdgeInsets.symmetric(vertical: ScreenUtil().setHeight(5), horizontal: ScreenUtil().setWidth(9)),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: AppColors.kDefaultPink),
child: Text(
showingAll ? 'see less' : 'see more',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setHeight(14)),
),
),
),
)
: SizedBox()
],
),
);
}
}

Flutter/Dart: update some variables but not others when using setState()

I'm trying to improve my understanding of Flutter, and am struggling with an issue. I am trying to create an app that presents a list of cards which pull data from a list. There is a button on the bottom that creates a new card when the user clicks it.
I am trying to get each card to display a unique 'Round number'. So for example each time the user clicks the button, a card will be added that displays sequential numbers next to the word 'Round'. Round 1 > Round 2 > Round 3 and so on.
Right now everything works except that every time the button is pressed all the cards are updated with the latest number. And so instead of getting a sequential list of cards, every card is updated to the latest round number.
What am I doing wrong? Thank you.
Here is my code:
import 'package:flutter/material.dart';
class Round {
int roundNumber;
int firstNumber;
int secondNumber;
Round({ this.roundNumber, this.firstNumber, this.secondNumber, });
}
int uid = 1;
List<Round> roundsList = [
Round(roundNumber: uid, firstNumber: 1, secondNumber: 2),
];
class createLevels extends StatefulWidget {
#override
_createLevelsState createState() => _createLevelsState();
}
class _createLevelsState extends State<createLevels> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text("Create Rounds",)
),
body: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20.0, 20),
child: Container(
child: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: roundsList.length,
itemBuilder: (BuildContext context, int whatIsThisVariable) {
return roundCard(Round(roundNumber: uid, firstNumber: 2, secondNumber: 3,));
}
),
),
Text("$roundsList"),
RaisedButton(
onPressed: () {
uid++;
roundsList.add(Round(roundNumber: uid));
setState(() {});
},
child: Text("Add Round"),
),
],
),
),
),
);
}
}
class roundCard extends StatelessWidget {
final Round round;
roundCard(this.round);
// roundsList.add(Round(roundNumber: 1));
#override
Widget build(BuildContext context) {
return Container(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
child: Text('Round ${round.roundNumber}:'),
flex: 12,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.firstNumber}',
),
),
flex: 3,
),
Spacer(
flex: 1,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.secondNumber}',
),
),
flex: 3,
),
],
),
)
),
);
}
}
You can copy paste run full code below
You need to pass index not uid
You can adjust first and second number you want
code snippet
itemBuilder: (BuildContext context, int index) {
return roundCard(roundsList[index]);
}),
...
onPressed: () {
uid++;
firstNumber++;
secondNumber++;
roundsList.add(
Round(roundNumber: uid, firstNumber: firstNumber, secondNumber: secondNumber));
setState(() {});
}
working demo
full code
import 'package:flutter/material.dart';
class Round {
int roundNumber;
int firstNumber;
int secondNumber;
Round({
this.roundNumber,
this.firstNumber,
this.secondNumber,
});
}
int uid = 1;
int firstNumber = 2;
int secondNumber = 3;
List<Round> roundsList = [
Round(roundNumber: uid, firstNumber: 1, secondNumber: 2),
];
class createLevels extends StatefulWidget {
#override
_createLevelsState createState() => _createLevelsState();
}
class _createLevelsState extends State<createLevels> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Create Rounds",
)),
body: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20.0, 20),
child: Container(
child: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: roundsList.length,
itemBuilder: (BuildContext context, int index) {
return roundCard(roundsList[index]);
}),
),
Text("$roundsList"),
RaisedButton(
onPressed: () {
uid++;
firstNumber++;
secondNumber++;
roundsList.add(
Round(roundNumber: uid, firstNumber: firstNumber, secondNumber: secondNumber));
setState(() {});
},
child: Text("Add Round"),
),
],
),
),
),
);
}
}
class roundCard extends StatelessWidget {
final Round round;
roundCard(this.round);
// roundsList.add(Round(roundNumber: 1));
#override
Widget build(BuildContext context) {
return Container(
child: Card(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Spacer(
flex: 1,
),
Expanded(
child: Text('Round ${round.roundNumber}:'),
flex: 12,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.firstNumber}',
),
),
flex: 3,
),
Spacer(
flex: 1,
),
Expanded(
child: TextFormField(
textAlign: TextAlign.center,
decoration: InputDecoration(
hintText: '${round.secondNumber}',
),
),
flex: 3,
),
],
),
)),
);
}
}
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: createLevels(),
);
}
}
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;
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>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}