How to solve BoxConstraints forces an infinite width exception in flutter? - flutter

Hello i was just trying to include a switch button on the right side of a list item. While doing so i ended up with this BoxConstraints forces an infinite width error. As im a complete beginner to flutter Can someone please let me know what does it means? and what changes i have to do in my code to get rid of this error?
import 'package:attendee/constants.dart';
import 'package:flutter/material.dart';
import 'package:attendee/models/userdeails.dart';
class userdetailsTile extends StatelessWidget {
final userdetails userdetail;
userdetailsTile({this.userdetail});
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Card(
//margin: EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
child: GestureDetector(
child: ListTile(
leading: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.lightGreen,
),
title: Text(userdetail.fullname),
),
),
),
Switch(
value: present,
onChanged: (value) {
//setState(() {
present = value;
print(present);
//});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
//),
],
),
);
}
}

Please check the following solutions.
Solution 1
return Material(child: Padding(
padding: EdgeInsets.only(top: 8.0),
child: ListTile(
leading: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.lightGreen,
),
title: Text(userdetail.fullname),
trailing: Switch(
value: present,
onChanged: (value) {
//setState(() {
present = value;
print(present);
//});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
),
),
);
Solution 2
return Material(child:
Padding(
padding: EdgeInsets.only(top: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded(
child: Card(
//margin: EdgeInsets.fromLTRB(20.0, 6.0, 20.0, 0.0),
child: Row(
children: [
CircleAvatar(
radius: 25.0,
backgroundColor: Colors.lightGreen,
), Text(userdetail.fullname)
],
),
),
),
Switch(
value: present,
onChanged: (value) {
//setState(() {
present = value;
print(present);
//});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
//),
],
),
),
);

Related

How do I fix the error: "A RenderFlex overflowed by 71 pixels on the right." and make the columns fit the screen in Flutter

Currently in my flutter app I get this error after adding a new column in the DataTable: "A RenderFlex overflowed by 71 pixels on the right."
How can I correct this so that the columns adapt to the screen size?
// For CircularProgressIndicator.
bool visible = false;
String? dropdownValue = 'Hoy';
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: new AppBar(
backgroundColor: Colors.black87,
leading: BackButton(
color: Colors.white,
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => HomePage(0, 0)));
},
),
title: new Text("Planilla de horarios"),
),
body: (!visible)
? Container(
color: Colors.white,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Container(
color: Colors.grey,
child: Row(children: <Widget>[
FutureBuilder<String>(
future: globals.SharedPreferencesHelper
.getDataFilterDebt(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Expanded(
child: Row(
children: <Widget>[
Expanded(
flex: 2,
child: DropdownButton<String>(
value: dropdownValue,
icon: Icon(Icons.arrow_downward),
iconSize: 24,
iconEnabledColor: Colors.white,
elevation: 16,
style: TextStyle(color: Colors.black),
underline: Container(
height: 0,
color: Colors.black,
),
onChanged: (String? newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['Hoy', 'Mañana']
.map<DropdownMenuItem<String>>(
(String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
Container(
margin:
const EdgeInsets.only(right: 10.0),
color: Colors.grey,
child: new Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
FlatButton(
child: Text("Buscar"),
color: Color(0xFF1F1F1F),
textColor: Colors.white,
padding: EdgeInsets.only(
left: 2,
right: 2,
top: 2,
bottom: 2),
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(
5)),
onPressed: () {
obtenerDetallesTecnicasImplantes(
dropdownValue.toString());
setState(() {});
},
),
]),
),
],
),
);
} else if (snapshot.hasError) {
return Image.asset("images/fundo_login.jpg");
} else {
return Container(
margin: EdgeInsets.only(top: 18),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
child: Container(
margin: EdgeInsets.only(bottom: 17.5),
child: CircularProgressIndicator(
valueColor:
AlwaysStoppedAnimation<Color>(
Colors.black),
),
height: 20,
width: 20,
)),
],
),
);
}
}),
]),
),
DataTable(
columns: [
DataColumn(label: Text('Hora')),
DataColumn(label: Text('Sector')),
DataColumn(label: Text('Agente')),
DataColumn(label: Text('Agente de cobertura')),
],
rows:
scheduleList // Loops through dataColumnText, each iteration assigning the value to element
.map(
((element) => DataRow(
cells: <DataCell>[
DataCell(Text(element![
"ingreso"])), //Extracting from Map element the value
DataCell(
Text(element["sector_nombre"])),
DataCell(Text(element["apellidos"] +
" " +
element["nombres"])),
DataCell(Text(element["agente_cobertura_det"])),
],
)),
)
.toList(),
),
],
),
),
)
: pageLoadingView(),
);
}
Widget pageLoadingView() {
return Container(
margin: EdgeInsets.only(top: 300),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Visibility(
visible: visible,
child: Container(
margin: EdgeInsets.only(bottom: 30),
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
))),
],
),
);
}
Color hexToColor(String code) {
return new Color(int.parse(code.substring(1, 7), radix: 16) + 0xFF000000);
}
}
Currently in my flutter app I get this error after adding a new column in the DataTable.................

Radio buttons within BottomModalSheet

I am new to flutter and dart. I have tried to insert few radio buttons and a raised button within a ModalBottomSheet.
The expected output is that, the button should be disabled until any option is selected from the radio buttons, and once any option is selected the button should be enabled.
In the code I have tried, there is an issue that the radio buttons are not getting selected as soon I click on them, instead they get selected once I close and reopen the bottom popup screen. Also, I'm unable to write code for disabling and enabling the button as I am unaware of it.
Any suggestions would be very much helpful, thanks in advance!
class ReturnReason extends StatefulWidget {
#override
_ReturnReasonState createState() => _ReturnReasonState();
}
class _ReturnReasonState extends State<ReturnReason> {
int selectedRadio;
#override
void initSate() {
super.initState();
selectedRadio = 0;
}
setSelectedRadio(int val) {
setState(() {
selectedRadio = val;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
'Flutter Project',
style: TextStyle(
fontSize: 18.0,
color: Colors.blue,
fontWeight: FontWeight.bold,
),
),
backgroundColor: Colors.black12,
iconTheme: IconThemeData(color: Colors.black),
),
body: Center(
child: RaisedButton(
onPressed: () {
_bottomSheet(context);
},
color: Colors.deepPurple,
padding: EdgeInsets.all(10.0),
child: Text(
'Click me',
style: TextStyle(color: Colors.white, fontSize: 18.0),
),
),
),
);
}
_bottomSheet(context) {
showModalBottomSheet(
context: context,
builder: (BuildContext bc) {
return SingleChildScrollView(
child: Container(
height: MediaQuery.of(context).size.height * .80,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
topRight: Radius.circular(30),
)),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
width: 0.8 * MediaQuery.of(context).size.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Select Return Reason'),
],
),
),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Improper description'),
Radio(
value: 1,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Size issue'),
Radio(
value: 2,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Divider(),
Container(
width: 0.8 * MediaQuery.of(context).size.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Other'),
Radio(
value: 3,
groupValue: selectedRadio,
onChanged: (val) {
setSelectedRadio(val);
},
),
],
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 0.9 * MediaQuery.of(context).size.width,
height: 0.075 * MediaQuery.of(context).size.height,
child: RaisedButton(
onPressed: () => {
_bottomSheet2(context)
},
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0)),
padding: EdgeInsets.all(0.0),
child: Ink(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.bottomCenter,
end: Alignment.topCenter,
),
borderRadius: BorderRadius.circular(10.0)),
child: GestureDetector(
onTap: () {
_bottomSheet2(context);
},
child: Container(
constraints: BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
minHeight: 0.075 *
MediaQuery.of(context).size.height),
alignment: Alignment.center,
child: Text('Continue'),
),
),
),
),
],
),
],
),
),
));
});
}

align widgets to the left and right of the screen in flutter

i am having problems trying to align my widgets. the left side is aligning correctly but the right side is off a little bit.
here is my code
this is the code for the card view
ListView itemList(List<IncomeData> items, AppDatabase database, BuildContext context) {
return ListView(
children: items.map((IncomeData income) {
return Container(
child: Padding(
padding: const EdgeInsets.fromLTRB(15.0, 5.0, 15.0,5.0),
child: new Card( //listView(income),
child: Padding(
padding: const EdgeInsets.fromLTRB(20.0, 0.0, 20.0,0.0),
child: new Column(
children: <Widget>[
listView(income),
new ButtonBar(
children: <Widget>[
new RaisedButton.icon(
label: const Text('Edit'),
icon: Icon(Icons.edit,),
color: colorPrimary,
onPressed: () {
_navigateAndDisplaySelection(context, income);
/* Navigator.push(context,
MaterialPageRoute(builder: (context) => AddEditIncomeForm(incomeData: income)));*/
},
),
new RaisedButton.icon(
label: const Text('Delete'),
icon: Icon(Icons.delete),
color: colorPrimary,
onPressed: () {
//database.deleteEntry(income);
//deleteConfirmation(income, database);
showDialog(
context: context,
builder: (context) {
return CheckBoxAlertDialog(transactionType: delete, data: income, database: database,);
}
);
},
),
],
),
],
),
),
)
)
);
}).toList(),
);
}
this is the code for the content of the card view
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
SizedBox(height: 8),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(common_functions(incomeList.dateReceived.toString()),
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
Spacer(),
//Expanded(child: SizedBox()),
Text("Not Received"),
Switch(
value: isSwitched,
onChanged: (value) {
setState(() {
isSwitched = value;
print(isSwitched);
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
]
),
Row(
children: <Widget>[
CircleAvatar(
backgroundColor: green,
child: Icon(Icons.attach_money, color: white,),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(15.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(incomeList.category,
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold )),
Text(incomeList.frequency + " | " + incomeList.depositAcct, style: TextStyle(color: grey, fontSize: 15)),
],
),
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text("\$" + incomeList.expectedAmount.toStringAsFixed(2),
style: TextStyle(fontSize: 18, color: green , fontWeight: FontWeight.bold ) ),
Text(incomeList.status, style: TextStyle(color: grey, fontSize: 15)),
],
),
],
),
],
);
if you take a look at the pic attached, the buttons and the top switch is not align properly to the number $68.00. see the red line i drawed. the switch on top is off to the left by a few spaces and also the buttons are the bottom are not align exactly to $68.00
am i doing something wrong that the widgets are not aligning to the red line as $68.00 is? how can i change my code to properly align all the widgets on the right side? thanks in advance
For ButtonBar it's buttonPadding parameter. Just be sure not to use any horizontal padding with it (right or left), since it will split it between the buttons. You will have to add a left padding for the buttons inside the ButtonBar.
I've attached an example for it and for the Switch widget, which doesn't have any properties to modify this behavior, but you can always use Transform.translate to overcome this.
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Transform.translate(
offset: Offset(10.0, 0.0),
child: Switch(
value: true,
onChanged: (value) {},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
),
],
),
ButtonBar(
buttonPadding: EdgeInsets.zero,
children: <Widget>[
RaisedButton.icon(
label: const Text('Edit'),
icon: Icon(
Icons.edit,
),
color: Colors.blue,
onPressed: () {},
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: RaisedButton.icon(
label: const Text('Delete'),
icon: Icon(Icons.delete),
color: Colors.blue,
onPressed: () {},
),
),
],
),

How to show data in function as a loop?

I am beginner in flutter and following some tutorials. I need to know how can I show data in a function by looping? For now, I am calling function 2 or 3 times to show data on how its possible ill call function just one time and shop my data which is in array?
Here. my data file which name is post_model.dart
class Post {
String authorName;
String authorImageUrl;
String timeAgo;
String imageUrl;
Post({
this.authorName,
this.authorImageUrl,
this.timeAgo,
this.imageUrl,
});
}
final List<Post> posts = [
Post(
authorName: 'Umaiz Khan',
authorImageUrl: 'assets/images/user0.png',
timeAgo: '5 min',
imageUrl: 'assets/images/post0.jpg',
),
Post(
authorName: 'Saad ahmed',
authorImageUrl: 'assets/images/user1.png',
timeAgo: '10 min',
imageUrl: 'assets/images/post1.jpg',
),
Post(
authorName: 'Hiba',
authorImageUrl: 'assets/images/user4.png',
timeAgo: '10 min',
imageUrl: 'assets/images/post2.jpg',
),
];
final List<String> stories = [
'assets/images/user1.png',
'assets/images/user2.png',
'assets/images/user3.png',
'assets/images/user4.png',
'assets/images/user0.png',
'assets/images/user1.png',
'assets/images/user2.png',
'assets/images/user3.png',
];
Here is my code at the end of the line you can see I am calling function and sending index. I need to call the function just one time and it will show all my arrays in data. Thanks in advance
import 'package:flutter/material.dart';
import 'package:curved_navigation_bar/curved_navigation_bar.dart';
import 'package:mytravel/screens/loginPage.dart';
import 'package:mytravel/screens/guidePlacePage.dart';
import 'package:mytravel/models/post_model.dart';
import 'package:mytravel/screens/view_post_screen.dart';
class newsFeedPage extends StatefulWidget {
#override
_newsFeedPageState createState() => _newsFeedPageState();
}
class _newsFeedPageState extends State<newsFeedPage> {
List<Widget> _buildPost() {
List<Widget> items = [];
items.add(
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Container(
width: double.infinity,
height: 560.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25.0),
),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Column(
children: <Widget>[
ListTile(
leading: Container(
width: 50.0,
height: 50.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Colors.black45,
offset: Offset(0, 2),
blurRadius: 6.0,
),
],
),
child: CircleAvatar(
child: ClipOval(
child: Image(
height: 50.0,
width: 50.0,
image: AssetImage(posts[].authorImageUrl),
fit: BoxFit.cover,
),
),
),
),
title: Text(
posts[].authorName,
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
subtitle: Text(posts[].timeAgo),
trailing: IconButton(
icon: Icon(Icons.more_horiz),
color: Colors.black,
onPressed: () => print('More'),
),
),
InkWell(
onDoubleTap: () => print('Like post'),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ViewPostScreen(
post: posts[],
),
),
);
},
child: Container(
margin: EdgeInsets.all(10.0),
width: double.infinity,
height: 400.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(25.0),
boxShadow: [
BoxShadow(
color: Colors.black45,
offset: Offset(0, 5),
blurRadius: 8.0,
),
],
image: DecorationImage(
image: AssetImage(posts[].imageUrl),
fit: BoxFit.fitWidth,
),
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.favorite_border),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2,515',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.chat),
iconSize: 30.0,
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ViewPostScreen(
post: posts[],
),
),
);
},
),
Text(
'350',
style: TextStyle(
fontSize: 14.0,
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(Icons.bookmark_border),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
),
],
),
),
),
);
for (var i = 0; i < posts.length; i++) {
items.add(_buildPost(i));
}
return items;
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFEDF0F6),
body: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Social Travel',
style: TextStyle(
fontFamily: 'Billabong',
fontSize: 32.0,
),
),
],
),
),
ListView(
physics: AlwaysScrollableScrollPhysics(),
children: _buildPost(),
),
],
),
);
}
}
You can build the children array of your ListView in a new method like this :
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFEDF0F6),
body: ListView(
physics: AlwaysScrollableScrollPhysics(),
children: _buildListViewItems(),
),
);
}
List<Widget> _buildListViewItems() {
List<Widget> items = [];
items.add(
Padding(
padding: EdgeInsets.symmetric(horizontal: 20.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Instagram',
style: TextStyle(
fontFamily: 'Billabong',
fontSize: 32.0,
),
),
],
),
),
);
for (var i = 0; i < posts.length; i++) {
items.add(_buildPost(i));
}
return items;
}

Button overlaps on textfield when keyboard is open

Here is my issue: The button should Not overlap the textfield.
Notice that I added a SingleChildScrollView(). The user can still scroll up and achieve the desired the result but I want to make it automatic:
Here is my code:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_masked_text/flutter_masked_text.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:talking_dodo/dodo/pages/payment/credit_card.dart';
class WithdrawPage extends StatefulWidget {
#override
WithdrawPageState createState() {
return new WithdrawPageState();
}
}
class WithdrawPageState extends State<WithdrawPage> {
bool isDataAvailable = true;
int _radioValue = 0;
MaskedTextController ccMask =
MaskedTextController(mask: "0000 0000 0000 0000");
Widget _buildBody() {
return Stack(
children: <Widget>[
SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.only(
left: 16.0, right: 16.0, top: 16.0, bottom: 16.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 18.0),
child: Text('Please select withdrawal method below'),
),
],
),
Container(
margin: EdgeInsets.only(top: 12.0),
child: Row(
children: <Widget>[
new Radio(
value: 0,
groupValue: _radioValue,
onChanged: ((value) {
setState(() {
_radioValue = value;
});
}),
),
Text(
'ATM Withdrawal',
),
],
),
),
Container(
height: 220.0,
padding: EdgeInsets.only(left: 20.0, right: 10.0),
margin: const EdgeInsets.all(2.0),
decoration: BoxDecoration(
// color: Colors.white,
border: Border.all(color: Colors.black),
borderRadius: BorderRadius.all(Radius.circular(12.0)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Bullet('Visit mcb Branch'),
Bullet('Select "Dodo Wallet" in the options'),
Bullet('Select the amount to withdraw'),
Bullet('Input your dodo wallet pin'),
Bullet(
'Input the code in the input box below and click withdraw'),
Padding(
padding: const EdgeInsets.only(top:18.0),
child: TextField(
controller: ccMask,
keyboardType: TextInputType.number,
maxLength: 19,
style:
TextStyle(fontFamily: 'Raleway', color: Colors.black),
decoration: InputDecoration(
labelText: "Code",
labelStyle: TextStyle(fontWeight: FontWeight.bold),
border: OutlineInputBorder()),
),
),
],
),
),
Row(
children: <Widget>[
new Radio(
value: 1,
groupValue: _radioValue,
onChanged: ((value) {
setState(() {
_radioValue = value;
});
}),
),
Text(
'Transfer to card',
),
],
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: isDataAvailable
? Expanded(
child: ButtonTheme(
height: 65.0,
child: RaisedButton(
color: Theme.of(context).primaryColorLight,
child: Text('Withdraw funds'),
onPressed: () => showSuccessDialog()),
),
)
: Padding(
padding: EdgeInsets.only(bottom: 10.0),
child: CircularProgressIndicator()),
),
],
),
),
],
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Withdrawal"),
),
body: _buildBody(),
);
}
void showSuccessDialog() {
setState(() {
isDataAvailable = false;
Future.delayed(Duration(seconds: 1)).then((_) => goToDialog());
});
}
goToDialog() {
setState(() {
isDataAvailable = true;
});
showDialog(
context: context,
barrierDismissible: true,
builder: (context) => Center(
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
successTicket(),
SizedBox(
height: 10.0,
),
FloatingActionButton(
backgroundColor: Colors.black,
child: Icon(
Icons.clear,
color: Colors.white,
),
onPressed: () {
Navigator.pop(context);
Navigator.of(context).pushNamed('/chat');
},
)
],
),
),
));
}
successTicket() => Container(
width: double.infinity,
padding: const EdgeInsets.all(16.0),
child: Material(
clipBehavior: Clip.antiAlias,
elevation: 2.0,
borderRadius: BorderRadius.circular(4.0),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
ProfileTile(
title: "Thank You!",
textColor: Colors.purple,
subtitle: "Your transaction was successful",
),
ListTile(
title: Text("Date"),
subtitle: Text("26 June 2018"),
trailing: Text("11:00 AM"),
),
ListTile(
title: Text("Daniel Daniel"),
subtitle: Text("gmail#daniel.com"),
trailing: CircleAvatar(
radius: 20.0,
backgroundImage: NetworkImage(
"https://avatars0.githubusercontent.com/u/12619420?s=460&v=4"),
),
),
ListTile(
title: Text("Amount"),
subtitle: Text("\$423.00"),
trailing: Text("Completed"),
),
Card(
clipBehavior: Clip.antiAlias,
elevation: 0.0,
color: Colors.grey.shade300,
child: ListTile(
leading: Icon(
FontAwesomeIcons.ccAmex,
color: Colors.blue,
),
title: Text("Credit/Debit Card"),
subtitle: Text("Amex Card ending ***6"),
),
),
],
),
),
),
);
}
class Bullet extends Text {
const Bullet(
String data, {
Key key,
TextStyle style,
TextAlign textAlign,
TextDirection textDirection,
Locale locale,
bool softWrap,
TextOverflow overflow,
double textScaleFactor,
int maxLines,
String semanticsLabel,
}) : super(
'• $data',
key: key,
style: style,
textAlign: textAlign,
textDirection: textDirection,
locale: locale,
softWrap: softWrap,
overflow: overflow,
textScaleFactor: textScaleFactor,
maxLines: maxLines,
semanticsLabel: semanticsLabel,
);
}
What you're looking for is the scrollPadding parameter of textfield. Flutter automatically scrolls the view to the top of the keyboard when the textfield is focused, but it has no idea about the fact that you've placed a button that sits at the bottom of the screen.
With your current code, you could simply replace scrollPadding with padding that has a larger bottom (i.e. the size of the yellow button) and flutter should do the rest for you.