Flutter - Icon widget - flutter

I'm using an icon widget and I want that when I press on the icon to jump to another place (Like a call icon), and an option to open another widget when I press on the icon (like the three dots icon), my problem was that in the flutter icon widget there is no onlongpress...
any sample code that may help on doing that?
this is my code for now:
child: ListTile(
leading: CircleAvatar(
radius: 25.0,
backgroundColor: Colors.brown,
),
title: Text(helpRequest.category),
subtitle: Text(helpRequest.description),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
IconButton(
icon: Icon(
Icons.call,
size: 20.0,
color: Colors.brown[900],
),
onPressed: () {
},
),
IconButton(
icon: Icon(
Icons.more_vert,
size: 20.0,
color: Colors.brown[900],
),
onPressed: () {
},
),
],
),
),

Instead of using IconButton, wrap the Icon with GestureDetector which will give you both onLongPress as well as onTap (onPressed). Please see the code below -
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Flutter Demo")),
body: MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
Offset _tapPosition;
void _storePosition(TapDownDetails details) {
_tapPosition = details.globalPosition;
}
return ListTile(
leading: const CircleAvatar(
radius: 25.0,
backgroundColor: Colors.brown,
),
title: const Text("helpRequest.category"),
subtitle: const Text("helpRequest.description"),
trailing: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
GestureDetector(
onTap: () => print("Tap: call"),
onLongPress: () => print("Long Press: Call"),
child: Icon(
Icons.call,
size: 20.0,
color: Colors.brown[900],
),
),
GestureDetector(
onTap: () => print("Tap: more_vert"),
onTapDown: _storePosition,
onLongPress: () async {
final RenderBox overlay =
Overlay.of(context).context.findRenderObject();
final int _selected = await showMenu(
items: [
PopupMenuItem(
value: 1,
child: Row(
children: <Widget>[
const Icon(Icons.delete),
const Text("Delete"),
],
),
),
PopupMenuItem(
value: 2,
child: Row(
children: <Widget>[
const Icon(Icons.edit),
const Text("Edit"),
],
),
)
],
context: context,
position: RelativeRect.fromRect(
_tapPosition &
const Size(40, 40), // smaller rect, the touch area
Offset.zero & overlay.size // Bigger rect, the entire screen
),
);
switch (_selected) {
case 1:
print("delete seleted");
break;
case 2:
print("edit seleted");
break;
}
},
child: Icon(
Icons.more_vert,
size: 20.0,
color: Colors.brown[900],
),
),
],
),
);
}
}

Related

Flutter Unexpected error, opens Heros.dart file

In my app there is 3 button.
Among them Login and Register button is working on onPressed but Settings Button (...) is not working. Once I click settings button I get this error.
Here is my Navigator code
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const SettingsPage();
},
),
);
},
child: const Text(
'...',
style: TextStyle(fontSize: 25),
),
),
This is my entire screen including emulator.
Here is my WelcomePage full code.
import 'package:flutter/material.dart';
import 'package:test_app_2nd/login_page.dart';
import 'package:test_app_2nd/register_page.dart';
import 'package:test_app_2nd/settings.dart';
class WelcomePage extends StatefulWidget {
const WelcomePage({super.key});
#override
State<WelcomePage> createState() => _WelcomePage();
}
class _WelcomePage extends State<WelcomePage> {
#override
Widget build(BuildContext context) {
return Material(
child: Scaffold(
appBar: AppBar(
title: const Text('Welcome'),
centerTitle: true,
backgroundColor: Colors.red,
),
backgroundColor: Colors.white,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Image.asset('images/flame-sign-in.png'),
const SizedBox(
height: 35.0,
),
const SizedBox(
height: 30.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.of(context)
.push(MaterialPageRoute(builder: (context) {
return const LoginPage();
}));
},
child: const Text('Login'),
),
const SizedBox(
width: 55.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const RegisterPage();
},
),
);
},
child: const Text('Register'),
),
],
),
const SizedBox(
height: 35.0,
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return const SettingsPage();
},
),
);
},
child: const Text(
'...',
style: TextStyle(fontSize: 25),
),
),
],
),
),
);
}
}
Here is my settings page full code:
import 'package:flutter/material.dart';
class SettingsPage extends StatefulWidget {
const SettingsPage({super.key});
#override
State<SettingsPage> createState() => _SettingsPageState();
}
String imagePath1 = 'images/flame-4.png';
String imagePath2 = 'images/flame-134.png';
String currentImagePath = imagePath1;
class _SettingsPageState extends State<SettingsPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Settings'),
actions: [
FloatingActionButton(
onPressed: () {},
child: const Icon(
Icons.add,
),
),
const SizedBox(
width: 5,
),
FloatingActionButton(
onPressed: () {},
child: const Text(
'...',
style: TextStyle(fontSize: 20.0),
),
)
],
),
drawerEnableOpenDragGesture: false,
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
setState(() {
if (currentImagePath == imagePath1) {
currentImagePath = imagePath2;
} else {
currentImagePath = imagePath1;
}
});
},
child: const Text('Click Me'),
),
Image.asset(currentImagePath),
],
),
),
);
}
}
Here is my error page screen shoot:

How to Create Elevated Button with Icon and Text in Flutter

How to create a button that has text and an icon by using the latest button widget ElevatedButton.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Elevated Button',
home: FlutterExample(),
);
}
}
class FlutterExample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Elevated Button with Icon and Text')),
body: Center(
child: ElevatedButton.icon(
icon: Icon(
Icons.home,
color: Colors.green,
size: 30.0,
),
label: Text('Elevated Button'),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
)));
}
}
you can add Row() or Wrap() Widget with multiple children in this case Icon() and Text()
ElevatedButton(
onPressed:() {},
child: Wrap(
children: <Widget>[
Icon(
Icons.favorite,
color: Colors.pink,
size: 24.0,
),
SizedBox(
width:10,
),
Text("Click me!", style:TextStyle(fontSize:20)),
],
),
),
You can use ElevatedButton.icon constructor:
ElevatedButton.icon(
onPressed: () {
//OnPressed Logic
},
icon: const Icon(Icons.plus_one),
label: const Text(
"Button Text"
)
),
You can use ElevatedButton.icon constructor for this like
ElevatedButton.icon(
icon: const Icon(Icons.add, size: 18),
label: Text('My elevated button'),
onPressed: () {},
),

Search delegate , When I click on Search button it shows red screen with error child! =null

I create a search option by search delegate but When I click on search button it shows the red screen with this error "The following assertion was thrown building _SearchPage(dirty, dependencies: [_LocalizationsScope-[GlobalKey#69e74], _InheritedTheme], state: _SearchPageState#72bb6): 'package:flutter/src/widgets/basic.dart': Failed assertion: line 6938 pos 15: 'child != null': is not true.
import 'package:flutter/material.dart';
import 'package:grk_001/screen/main_screen.dart';
import 'widgets/entry_item.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:grk_001/screen/favourite_screen.dart';
import 'package:grk_001/Provider/Auth.dart';
import 'package:provider/provider.dart';
import 'package:grk_001/Provider/cart.dart';
import 'package:grk_001/widgets/badge.dart';
import 'package:grk_001/screen/cart_screen.dart';
import 'package:grk_001/widgets/drawer.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:grk_001/models/main_screen_categories_entry.dart';
class HomeScreen extends StatefulWidget {
static const String routename = 'homescreen';
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
final GlobalKey<ScaffoldState> _scaffoldkey = GlobalKey<ScaffoldState>();
FirebaseUser Loggedinuser;
#override
void didChangeDependencies() {
// TODO: implement didChangeDependencies
Future.delayed(Duration.zero).then((_) async {
await Provider.of<Auth>(context, listen: false).getcurrentuser();
});
super.didChangeDependencies();
}
#override
Widget build(BuildContext context) {
final devicesize = MediaQuery.of(context).size;
return SafeArea(
child: Scaffold(
key: _scaffoldkey,
appBar: AppBar(
leading: IconButton(
onPressed: () {
_scaffoldkey.currentState.openDrawer();
},
icon: Icon(
Icons.list,
color: Colors.white,
size: 35.0,
),
),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(50.0),
child: Container(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
const SizedBox(
width: 10.0,
),
Expanded(
child: GestureDetector(
onTap: () {
_scaffoldkey.currentState.openEndDrawer();
},
child: Container(
padding: const EdgeInsets.all(8.0),
alignment: Alignment.center,
height: 40.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5.0),
),
child: Text(
'Categories',
),
),
),
),
],
),
),
),
title: Text('HomeScreen'),
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(context: context, delegate: DataSearch());
},
),
IconButton(
icon: Icon(
FontAwesomeIcons.heart,
size: 30.0,
),
tooltip: 'My Wish List',
onPressed: () {
Navigator.pushNamed(context, FavouriteScreen.routename);
},
),
IconButton(
icon: Icon(
Icons.notifications,
size: 30.0,
),
tooltip: 'My Notifications',
onPressed: () {},
),
Consumer<Cart>(
builder: (_, cartdata, ch) => Badge(
child: ch,
value: cartdata.itemcount.toString(),
),
child: IconButton(
onPressed: () {
Navigator.pushNamed(context, CartScreen.routename);
},
icon: Icon(
Icons.shopping_cart,
size: 40.0,
),
),
),
],
),
body: MainScreen(),
// body: CategoryScreen(),
endDrawer: Drawer(
child: Column(
children: <Widget>[
Container(
color: Color(0XFFFF4081),
height: devicesize.height * 0.10,
child: DrawerHeader(
margin: EdgeInsets.zero,
child: InkWell(
onTap: () {
Navigator.of(context).pop();
},
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Icon(
Icons.apps,
color: Colors.white,
),
SizedBox(
width: 10.0,
),
Text(
'Categories',
style:
TextStyle(color: Colors.white, fontSize: 20.0),
),
],
),
)
// child: Text('Categories'),
),
),
Container(
height: devicesize.height * 0.85,
child: ListView.builder(
itemBuilder: (context, index) => EntryItem(data[index]),
itemCount: data.length,
),
)
],
),
),
drawer: Container(
width: devicesize.width * 0.65,
child: DrawerItem(devicesize, context),
),
),
);
}
}
class DataSearch extends SearchDelegate<String> {
final statelist = [
'Andaman and Nicobar Islands',
' Andhra Pradesh',
'Arunachal Pradesh',
'Assam',
'Bihar',
'Chandigarh ',
'Chhattisgarh',
'Dadra and Nagar Havel',
'Daman and Diu',
'Delhi',
'Goa',
'Gujrat',
'Haryana',
'Himachal Pradesh',
'Uttar Pradesh',
'Uttarakhand',
'West Bengal',
'Sikkim',
'Meghalya',
'Mizoram',
];
final recentlist = ['Modingar', 'Ghaziabad', 'Merrut', 'Hapur', 'Delhi'];
#override
List<Widget> buildActions(BuildContext context) {
// action for app bar
return [
IconButton(
onPressed: () {
query = "";
},
icon: Icon(Icons.clear),
)
];
}
#override
Widget buildLeading(BuildContext context) {
// leading icon on the left of the app bar
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
// TODO: implement buildResults
return Container(
height: 150.0,
child: Card(
color: Colors.red,
shape: StadiumBorder(),
child: Text(query),
),
);
}
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
showResults(context);
},
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey))
]),
)),
itemCount: suggestionList.length,
);
}
}
You can copy paste run full code below
You need return keyword in buildSuggestions
You can return ListView.builder
code snippet
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
return ListView.builder(
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), actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
showSearch(context: context, delegate: DataSearch());
},
),
]),
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.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
class DataSearch extends SearchDelegate<String> {
final statelist = [
'Andaman and Nicobar Islands',
' Andhra Pradesh',
'Arunachal Pradesh',
'Assam',
'Bihar',
'Chandigarh ',
'Chhattisgarh',
'Dadra and Nagar Havel',
'Daman and Diu',
'Delhi',
'Goa',
'Gujrat',
'Haryana',
'Himachal Pradesh',
'Uttar Pradesh',
'Uttarakhand',
'West Bengal',
'Sikkim',
'Meghalya',
'Mizoram',
];
final recentlist = ['Modingar', 'Ghaziabad', 'Merrut', 'Hapur', 'Delhi'];
#override
List<Widget> buildActions(BuildContext context) {
// action for app bar
return [
IconButton(
onPressed: () {
query = "";
},
icon: Icon(Icons.clear),
)
];
}
#override
Widget buildLeading(BuildContext context) {
// leading icon on the left of the app bar
return IconButton(
icon: AnimatedIcon(
icon: AnimatedIcons.menu_arrow,
progress: transitionAnimation,
),
onPressed: () {
close(context, null);
},
);
}
#override
Widget buildResults(BuildContext context) {
// TODO: implement buildResults
return Container(
height: 150.0,
child: Card(
color: Colors.red,
shape: StadiumBorder(),
child: Text(query),
),
);
}
#override
Widget buildSuggestions(BuildContext context) {
// TODO: implement buildSuggestions
final suggestionList = query.isEmpty
? recentlist
: statelist.where((element) => element.startsWith(query)).toList();
return ListView.builder(
itemBuilder: (context, index) => ListTile(
onTap: () {
showResults(context);
},
title: RichText(
text: TextSpan(
text: suggestionList[index].substring(0, query.length),
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
),
children: [
TextSpan(
text: suggestionList[index].substring(query.length),
style: TextStyle(color: Colors.grey))
]),
)),
itemCount: suggestionList.length,
);
}
}

Making a speedial without FloatingActionButton

im trying to make my button open up something similar to this: FAB version of what i want
This is what my code looks like:
return Card(
color: Colors.yellow[100],
child: ListTile(
trailing: IconButton(icon: Icon(Icons.more_vert),
onPressed: () {},
),
leading: Text(document['date'] + '\n' + document['time'], textAlign: TextAlign.center,),
subtitle: Text(
'Loctaion: ' + document['location'],
),
title: Text(document['name'],
textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
),
);
}
I want the IconButton to open up something similar to the SpeedDial, to make the user choose between accept, deny, or choose later for the event.
My ListTile with the Icon.more_vert that i want to be able to open a speeddial
You can copy paste run full code below
You can use https://pub.dev/packages/flutter_portal
Basically use Overlay and show circle button
You can change childAnchor and menuAnchor, and circle button size per your request
It's too long to describe all the detail, please see working demo and full code below
code snippet
ListTile(
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () => setState(() => showMenu = true),
),
...
return ModalEntry(
visible: showMenu,
onClose: () => setState(() => showMenu = false),
childAnchor: Alignment.topRight,
menuAnchor: Alignment.bottomRight,
menu: Menu(
children: [
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(width: 40, height: 40, child: Icon(Icons.menu)),
),
),
),
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_portal/flutter_portal.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
builder: (_, child) => Portal(child: child),
home: Scaffold(
appBar: AppBar(
title: const Text('Example'),
),
body: Container(
padding: const EdgeInsets.all(10),
alignment: Alignment.centerLeft,
child: ContextualMenuExample(),
),
),
);
}
}
class ContextualMenuExample extends StatefulWidget {
ContextualMenuExample({Key key}) : super(key: key);
#override
_ContextualMenuExampleState createState() => _ContextualMenuExampleState();
}
class _ContextualMenuExampleState extends State<ContextualMenuExample> {
bool showMenu = false;
#override
Widget build(BuildContext context) {
return ModalEntry(
visible: showMenu,
onClose: () => setState(() => showMenu = false),
childAnchor: Alignment.topRight,
menuAnchor: Alignment.bottomRight,
menu: Menu(
children: [
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(width: 40, height: 40, child: Icon(Icons.menu)),
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(
width: 40, height: 40, child: Icon(Icons.description)),
),
),
),
ClipOval(
child: Material(
color: Colors.blue, // button color
child: InkWell(
splashColor: Colors.red, // inkwell color
onTap: () {
setState(() => showMenu = false);
},
child: SizedBox(
width: 40, height: 40, child: Icon(Icons.settings)),
),
),
)
],
),
child: Container(
child: Card(
color: Colors.yellow[100],
child: ListTile(
trailing: IconButton(
icon: Icon(Icons.more_vert),
onPressed: () => setState(() => showMenu = true),
),
leading: Text(
"date time",
textAlign: TextAlign.center,
),
subtitle: Text(
'Loctaion',
),
title: Text('name',
textAlign: TextAlign.left, style: TextStyle(fontSize: 20.0)),
),
),
),
);
}
}
class Menu extends StatelessWidget {
const Menu({
Key key,
#required this.children,
}) : super(key: key);
final List<Widget> children;
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 10),
child: Card(
elevation: 8,
child: IntrinsicWidth(
child: Column(
mainAxisSize: MainAxisSize.min,
children: children,
),
),
),
);
}
}
class ModalEntry extends StatelessWidget {
const ModalEntry({
Key key,
this.onClose,
this.menu,
this.visible,
this.menuAnchor,
this.childAnchor,
this.child,
}) : super(key: key);
final VoidCallback onClose;
final Widget menu;
final bool visible;
final Widget child;
final Alignment menuAnchor;
final Alignment childAnchor;
#override
Widget build(BuildContext context) {
return GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: visible ? onClose : null,
child: PortalEntry(
visible: visible,
portal: menu,
portalAnchor: menuAnchor,
childAnchor: childAnchor,
child: IgnorePointer(
ignoring: visible,
child: child,
),
),
);
}
}

TextEditController clears the text field's text

I am trying to make an application about to do. But there is an issue. I write some text to the text field. But When I add a new text field it clears the text filed's text. And when I delete the TextEditingController it fixes the issue. But then when I try to slide it right or left it clears the text again.
Here is the code
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int today=1;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("Takveam"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Center(
child: Text(
"$today",
style: TextStyle(
fontSize: 20.0,
color: Colors.lightGreenAccent[700],
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Todo()),
);
},
icon: Icon(Icons.featured_play_list),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today-=1;
if(today<1)
today=31;
});
},
icon: Icon(Icons.calendar_today),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today=31;
});
},
icon: Icon(Icons.access_alarms),
color: Colors.lightGreenAccent[700],
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
today+=1;
if(today>31)
{
today=1;
}
});
},
child: Text("Dıkla"),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
class Todo extends StatefulWidget {
#override
_TodoState createState() => _TodoState();
}
class _TodoState extends State<Todo> {
int i=1;
List<Column> todoos = [
Column(),
];
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("To do"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: ListView.builder(
itemCount: i,
itemBuilder: (context,index){
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
height: 60,
child: Card(
color: Colors.lightGreenAccent[700],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: new TextEditingController(),
style: TextStyle(
fontSize: 20,
color: Colors.white
),
onChanged: (text) {
print(i);
},
),
],
),
),
),
actions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.check_circle,
)
],
secondaryActions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.more_horiz
)
],
),
],
);
}
),
floatingActionButton: FloatingActionButton(
onPressed: (){
setState(() {
i+=1;
});
},
child: Icon(
Icons.add,
),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
You can copy paste run full code below
Each item need a TextEditingController
For demo purpose, I remove background color
Step 1: declare a List<TextEditingController> listTexttCtrl = [TextEditingController()];
Step 2: In FloatingActionButton, add listTexttCtrl.add(TextEditingController());
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
i += 1;
listTexttCtrl.add(TextEditingController());
});
},
Step 3: TextField controller attribute use listTexttCtrl[index]
TextField(
controller: listTexttCtrl[index],
working demo
full code
import 'package:flutter/material.dart';
import 'package:flutter_slidable/flutter_slidable.dart';
void main() => runApp(MaterialApp(
home: Home(),
));
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
int today = 1;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("Takveam"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Center(
child: Text(
"$today",
style: TextStyle(
fontSize: 20.0,
color: Colors.lightGreenAccent[700],
letterSpacing: 1,
fontWeight: FontWeight.bold,
),
),
),
IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Todo()),
);
},
icon: Icon(Icons.featured_play_list),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today -= 1;
if (today < 1) today = 31;
});
},
icon: Icon(Icons.calendar_today),
color: Colors.lightGreenAccent[700],
),
IconButton(
onPressed: () {
setState(() {
today = 31;
});
},
icon: Icon(Icons.access_alarms),
color: Colors.lightGreenAccent[700],
),
],
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
today += 1;
if (today > 31) {
today = 1;
}
});
},
child: Text("Dıkla"),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}
class Todo extends StatefulWidget {
#override
_TodoState createState() => _TodoState();
}
class _TodoState extends State<Todo> {
int i = 1;
List<Column> todoos = [
Column(),
];
List<TextEditingController> listTexttCtrl = [TextEditingController()];
#override
Widget build(BuildContext context) {
return Scaffold(
//backgroundColor: Colors.lightGreenAccent[100],
appBar: AppBar(
title: Text("To do"),
centerTitle: true,
backgroundColor: Colors.lightGreenAccent[700],
),
body: ListView.builder(
itemCount: i,
itemBuilder: (context, index) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Slidable(
actionPane: SlidableDrawerActionPane(),
actionExtentRatio: 0.25,
child: Container(
height: 60,
child: Card(
color: Colors.lightGreenAccent[700],
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
controller: listTexttCtrl[index],
style: TextStyle(fontSize: 20, color: Colors.white),
onChanged: (text) {
print(i);
},
),
],
),
),
),
actions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.check_circle,
)
],
secondaryActions: <Widget>[
IconSlideAction(
color: Colors.lightGreenAccent[200],
icon: Icons.more_horiz)
],
),
],
);
}),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
i += 1;
listTexttCtrl.add(TextEditingController());
});
},
child: Icon(
Icons.add,
),
backgroundColor: Colors.lightGreenAccent[700],
),
);
}
}