So i have this build method:
#override
Widget build(BuildContext context) {
return Scaffold(
body: _createBody(),
);
}
Widget _createBody(){
return SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"xOrder HD",
style: TextStyle(
color: Colors.blue[900],
fontSize: 36
),
),
Container(
padding: const EdgeInsets.only(left: 13, top: 13),
alignment: Alignment.bottomLeft,
child: Text(AppVersion.xOrderVersion()),
)
],
)
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.solutionFor,
textAlign: TextAlign.start,
),
],
)
),
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
child: Row(
children: [
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.companyList,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
_loadedAziende.isEmpty ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.noCompanyFound,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
const SizedBox(height: 50,),
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Material(
elevation: 5,
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.add, color: Colors.white,),
const SizedBox(width: 10,),
Text(
AppLocalizations.of(context)!.newCompany,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
)
)
],
)
)
:
Expanded(
child: Stack(
children: [
ListView.separated(
itemCount: _aziendeToShow.length,
itemBuilder: (ctx, index) {
return InfoCell(
info: _aziendeToShow[index],
delegate: this,
);
},
separatorBuilder: (ctx, index) => const Divider(height: 1,),
),
Positioned(
bottom: 15,
right: 15,
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Container(
padding: const EdgeInsets.all(10),
child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
decoration: BoxDecoration(
color: mainColor,
shape: BoxShape.circle
),
)
)
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
),
if(_loadedAziende.isNotEmpty)
const SizedBox(width: 25,),
if(_loadedAziende.isNotEmpty)
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
isEmptyOrNull(_selectedAzienda) ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.selectAcompany,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
],
)
)
:
Expanded(
child: Column(
children: [
Container(
height: 150,
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey[400]!),
image: DecorationImage(
image: Image.network(_selectedAzienda!.aziendaLogo).image,
fit: BoxFit.contain
)
),
),
Text(
_selectedAzienda!.aziendaCode,
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Container(
margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
child: const TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.person),
border: OutlineInputBorder(),
labelText: 'Username',
),
)
),
Container(
margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
child: const TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.password),
border: OutlineInputBorder(),
labelText: 'Password',
),
)
),
const Spacer(),
Container(
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.login, color: Colors.white,),
const SizedBox(width: 15,),
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold
),
)
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
)
),
)
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.all(10),
height: 82,
width: 135,
decoration: BoxDecoration(
image: DecorationImage(
image: Image.asset("assets/images/logo-axentya-inv.png").image,
fit: BoxFit.fill
)
),
)
],
)
],
),
);
}
And this is the final result:
The problem presents when i click on the TextField and the keyboard shows up going above the TextFields and showing up the black and yellow banner:
I don't know why in this screenshot the keyboard doesn't show up, but i swear that is opened.
If i try to put the main Column container inside a SingleChildScrollView, the compiler tells me it cannot render it cause I'm not specifying the height dimensions.
How should i fix this.
You cannot use Expanded inside SingleChildScrollView. However, you can use CustomScrollView along with SliverFillRemaining widget to achieve that:
class TestPage extends StatelessWidget {
const TestPage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverFillRemaining(
hasScrollBody: true,
child: _createBody(),
)
],
),
);
}
Widget _createBody(){
return SafeArea(
child: Column(
children: [
Container(
margin: const EdgeInsets.only(top: 5, left: 10, right: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"xOrder HD",
style: TextStyle(
color: Colors.blue[900],
fontSize: 36
),
),
Container(
padding: const EdgeInsets.only(left: 13, top: 13),
alignment: Alignment.bottomLeft,
child: Text(AppVersion.xOrderVersion()),
)
],
)
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 10),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.solutionFor,
textAlign: TextAlign.start,
),
],
)
),
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 25, right: 25, top: 20, bottom: 10),
child: Row(
children: [
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.companyList,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
_loadedAziende.isEmpty ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.noCompanyFound,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
const SizedBox(height: 50,),
GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Material(
elevation: 5,
borderRadius: const BorderRadius.all(Radius.circular(5)),
child: Container(
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
const Icon(Icons.add, color: Colors.white,),
const SizedBox(width: 10,),
Text(
AppLocalizations.of(context)!.newCompany,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
)
)
],
)
)
:
Expanded(
child: Stack(
children: [
ListView.separated(
itemCount: _aziendeToShow.length,
itemBuilder: (ctx, index) {
return InfoCell(
info: _aziendeToShow[index],
delegate: this,
);
},
separatorBuilder: (ctx, index) => const Divider(height: 1,),
),
Positioned(
bottom: 15,
right: 15,
child: GestureDetector(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (context) => QrCodeScanner(delegate: this,)));
},
child: Container(
padding: const EdgeInsets.all(10),
child: const Icon(Icons.qr_code_scanner, color: Colors.white, size: 28),
decoration: BoxDecoration(
color: mainColor,
shape: BoxShape.circle
),
)
)
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
),
),
),
if(_loadedAziende.isNotEmpty)
const SizedBox(width: 25,),
if(_loadedAziende.isNotEmpty)
Expanded(
child: Container(
child: Column(
children: [
Container(
padding: const EdgeInsets.symmetric(vertical: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold,
)
),
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(4), topRight: Radius.circular(4))
),
),
isEmptyOrNull(_selectedAzienda) ?
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
AppLocalizations.of(context)!.selectAcompany,
style: const TextStyle(
color: Colors.black54,
fontSize: 16
)
),
],
)
)
:
Expanded(
child: ListView(
children: [
Container(
height: 150,
margin: const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(color: Colors.grey[400]!),
image: DecorationImage(
image: Image.network(_selectedAzienda!.aziendaLogo).image,
fit: BoxFit.contain
)
),
),
Text(
_selectedAzienda!.aziendaCode,
style: const TextStyle(
color: Colors.black,
fontSize: 25,
fontWeight: FontWeight.bold
),
),
Container(
margin: const EdgeInsets.symmetric(vertical: 30, horizontal: 15),
child: const TextField(
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.person),
border: OutlineInputBorder(),
labelText: 'Username',
),
)
),
Container(
margin: const EdgeInsets.only(bottom: 30, left: 15, right: 15),
child: const TextField(
obscureText: true,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
icon: Icon(Icons.password),
border: OutlineInputBorder(),
labelText: 'Password',
),
)
),
const Spacer(),
Container(
margin: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Icon(Icons.login, color: Colors.white,),
const SizedBox(width: 15,),
Text(
AppLocalizations.of(context)!.login,
style: const TextStyle(
fontSize: 22,
color: Colors.white,
fontWeight: FontWeight.bold
),
)
],
),
decoration: BoxDecoration(
color: mainColor,
borderRadius: const BorderRadius.all(Radius.circular(5))
),
)
],
)
)
],
),
decoration: BoxDecoration(
color: Colors.grey[100],
border: Border.all(color: Colors.grey[500]!),
borderRadius: const BorderRadius.all(Radius.circular(5))
)
),
)
],
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
margin: const EdgeInsets.all(10),
height: 82,
width: 135,
decoration: BoxDecoration(
image: DecorationImage(
image: Image.asset("assets/images/logo-axentya-inv.png").image,
fit: BoxFit.fill
)
),
)
],
)
],
),
);
}
}
Add this resizeToAvoidBottomPadding: false to the Scaffold.
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: _createBody(),
);
}
EDIT:
If you use de flutter_keyboard_visibility to reduce the logo image when the soft Keyboard is shown would be something like this:
import 'package:flutter_keyboard_visibility/flutter_keyboard_visibility.dart';
#override
Widget build(BuildContext context) {
return KeyboardVisibilityBuilder(builder: (context, isKeyboardVisible) {
return Scaffold(
resizeToAvoidBottomInset: false,
body: _createBody(isKeyboardVisible),
);
});
}
Widget _createBody(bool isKeyboardVisible) {
...
Expanded(
child: Column(
children: [
Container(
height: isKeyboardVisible ? 50 : 150, <<--- HERE
margin: const EdgeInsets.symmetric(
vertical: 20, horizontal: 10),
decoration: BoxDecoration(
shape: BoxShape.circle,
border:
Border.all(color: Colors.grey[400]!),
image: DecorationImage(...
),
}
The answer is in the error itself. When the column is inside a view that is scrollable, the column is trying to shrink-wrap its content but since you used Expanded as a child of the column it is working opposite to the column trying to shrink-wrap its children. This is causing this error because these two directives are completely opposite to each other.
As mentioned in the error logs try the following:
Consider setting mainAxisSize to MainAxisSize.min (for column) and using FlexFit.loose fits for the flexible(use Flexible rather than Expanded).
I am doing a basic tasks app. When there is a text saved from textfield it appears below in the same page in expanded view. I want to make the final task to go above the previous one but when I do reverse: true, it sends the first task to the bottom of the page. Can I make the first task to appear above and each new task to appear above the one posted before?
You can view my code here:
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, top: 16),
child: const Text(
'Enter your task',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
Container(
padding: const EdgeInsets.only(top: 16, right: 8),
child: TextButton.icon(
onPressed: () {
setState(() {
tasks.add(textController.text);
});
},
icon: const Icon(Icons.save),
label: const Text('Save')),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
child: TextField(
controller: textController,
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
fillColor: Colors.grey.shade200,
filled: true,
hintStyle: TextStyle(color: Colors.grey.shade400),
hintText: "Type whatever you want",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(15),
)),
),
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.only(left: 8),
child: const Text(
'Tasks',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
)),
const SizedBox(height: 16),
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[index]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),
],
),
Concept - use listname.insert(int index,element) function to add element at a particular position in your case it is position 1 (after 0)
int i = 0 ;
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
padding: const EdgeInsets.only(left: 8, top: 16),
child: const Text(
'Enter your task',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
Container(
padding: const EdgeInsets.only(top: 16, right: 8),
child: TextButton.icon(
onPressed: () {
tasks.isempty == true? i = 0 : i = 1;
setState(() {
tasks.insert(i,textController.text);
});
},
icon: const Icon(Icons.save),
label: const Text('Save')),
),
],
),
Padding(
padding: const EdgeInsets.only(top: 16, right: 8, left: 8),
child: TextField(
controller: textController,
style: const TextStyle(color: Colors.black),
decoration: InputDecoration(
fillColor: Colors.grey.shade200,
filled: true,
hintStyle: TextStyle(color: Colors.grey.shade400),
hintText: "Type whatever you want",
border: OutlineInputBorder(
borderSide: BorderSide.none,
borderRadius: BorderRadius.circular(15),
)),
),
),
const SizedBox(height: 16),
Container(
padding: const EdgeInsets.only(left: 8),
child: const Text(
'Tasks',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
)),
const SizedBox(height: 16),
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[index]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),
],
),
Try This i use this method when i want to reverse and list
Expanded(
child: tasks.length > 0
? ListView.builder(
reverse: false,
itemCount: tasks.length,
itemBuilder: (context, index) {
int rIndex = tasks.length - 1 - index;
return Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
height: 100,
color: Colors.grey,
child: Text('${tasks[rIndex]}'),
),
);
})
: Center(
child: Text('No Tasks Yet'),
),
),
I have a problem. There is a list and Flexible, which should expand according to the size of the list, but now with mine the list is decreasing, but there is no container itself. How can I make the container fit the length of the list and change constantly instead of being static? It's just that if I remove Container from Flexible, then I will have a list without a background color.
Padding(
padding: const EdgeInsets.only(left: 24, right: 24),
child: Column(
children: [
const SizedBox(height: 178),
const BackStepWidget(text: 'Select Language'),
const SizedBox(height: 30),
Container(
width: size.width,
// height: 65,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(24),
topRight: Radius.circular(24)),
color: constants.Colors.greyDark),
child: Padding(
padding: const EdgeInsets.only(
left: 16, right: 16, top: 16, bottom: 13),
child: Row(
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
contentPadding: EdgeInsets.all(5),
filled: true,
fillColor: constants.Colors.greyLight,
hintText: 'Search',
hintStyle: TextStyle(color: constants.Colors.white),
prefixIcon: Icon(
Icons.search,
color: constants.Colors.white,
),
suffixIcon: Icon(Icons.keyboard_voice,
color: constants.Colors.white),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10)),
)),
)),
const SizedBox(width: 14),
const Text('Cancel',
style: constants.Styles.smallBookTextStyleWhite)
],
),
),
),
Flexible(
child: Container(
width: size.width,
decoration: const BoxDecoration(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(24),
bottomRight: Radius.circular(24)),
color: constants.Colors.greyDark),
child: Padding(
padding: const EdgeInsets.only(left: 16),
child: MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView.separated(
separatorBuilder: ((context, index) => Divider(
height: 2,
color: constants.Colors.white.withOpacity(0.2))),
itemCount: language.length,
itemBuilder: (context, index) => Padding(
padding:
const EdgeInsets.only(top: 9, bottom: 10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
language[index],
style: constants
.Styles.smallBoldTextStyleWhite,
),
Text(
language[index],
style: constants
.Styles.smallerBookTextStyleWhite,
),
],
),
)),
),
),
),
)
],
),
);
You're using a ListView.Separated inside the Container. Thing is, ListView's by default have an infinite height...
Go ahead and give your ListView the shrinkWrap property, like this:
ListView.separated(
shrinkWrap: true,
(...)
)
This will shrink the ListView to only be the height of it's children's combined heights!
Good luck xx
I just started learning flutter and am trying to build a todo app, the problem I encountered was the widget buildActionSwipeLeft() set as dismissible background goes up rather than left to right after the list item is dismissed although I set the direction of the dismissible from left to right or start to end. Any help would be appreciated.
My code:
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
horizontal: 24.0,
),
color: const Color(0xfff6f6f6f6),
child: Stack(
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
margin: const EdgeInsets.only(bottom: 32.0, top: 32.0),
child: const Text(
"Reminders",
style: TextStyle(
fontSize: 25.0,
fontWeight: FontWeight.bold
),
),
),
Expanded(
child: ListView.builder(
itemCount: todos.length,
physics: const BouncingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.only(
bottom: 15.0
),
child: Card(
color: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
elevation: 4,
child: ClipRRect(
clipBehavior: Clip.antiAlias,
child: Dismissible(
background: buildActionSwipeLeft(),
onDismissed: (direction) {
setState(() {
todos.removeAt(index);
_titleController.removeAt(index);
_detailController.removeAt(index);
});
},
direction: DismissDirection.startToEnd,
key: UniqueKey(),
child: Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(
vertical: 13.0,
horizontal: 24.0
),
margin: const EdgeInsets.only(
bottom: 20.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
TextField(
cursorColor: Colors.black,
controller: _titleController[index],
style: const TextStyle(
fontSize: 22.0,
fontWeight: FontWeight.bold
),
decoration: const InputDecoration(
hintText: "Enter a title",
border: InputBorder.none,
),
),
const Divider(
color: Colors.black,
),
Padding(
padding: const EdgeInsets.only(top: 0.0),
child: TextField(
controller: _detailController[index],
style: TextStyle(
fontSize: 20.0,
color: Colors.grey[900],
),
cursorColor: Colors.black,
maxLines: null,
decoration: const InputDecoration(
hintText: "Enter the description",
label: Text("description"),
border: InputBorder.none
),
),
),
],
),
),
),
),
),
);
},
),
)
],
),
Positioned(
bottom: 24.0,
right: 0.0,
child: GestureDetector(
onTap: () {
setState(() {
todos.add('');
_titleController.add(TextEditingController());
_detailController.add(TextEditingController());
});
},
child: Container(
width: 60.0,
height: 60.0,
decoration: BoxDecoration(
color: Colors.black87,
borderRadius: BorderRadius.circular(20.0),
),
child: const Icon(Icons.add, color: Colors.white, size: 35.0),
),
),
)
],
),
),
),
);
}
}
Widget buildActionSwipeLeft() => Container(
alignment: Alignment.centerLeft,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
color: Colors.redAccent,
),
padding: const EdgeInsets.symmetric(horizontal: 30),
child: const Icon(Icons.delete, color: Colors.white, size: 30),
);
I figured out that this was not an issue as this is the default animation thats played when a list tile wrapped in a dismissible widget is dismissed. And the dismiss direction just determines the direction in which you can swipe the widget and not the direction in which the widget animates after dismissal.