I tried putting inkwell and also gesture detector widgets but onTap() doesn't seem to work in any scenario.
I am dynamically adding data to gridView using futureBuilder and I am adding on tap functionality using InkWell and also tried GestureDetector but it seems gridView does not accept any taps!
FutureBuilder(
future: getAllFriends(),
builder: (context, snapshot) {
if (snapshot.hasData) {
return Container(
padding: const EdgeInsets.all(8),
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(color: Color(0xFFDBE2E7)),
child: GridView.builder(
padding: EdgeInsets.zero,
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
childAspectRatio: 0.8,
),
itemCount: friendsList.length,
itemBuilder: (context, index) {
return InkWell(
onTap: () {
print('object');
},
child: Container(
color: Colors.amber.shade100,
child: friendCircle(
friendsList[index].friendPoint,
friendsList[index].friendPic,
friendsList[index].friendName,
),
),
);
},
),
);
} else {
return const SizedBox(
width: 300,
height: 300,
child: IgnorePointer(
child: Center(
child: CircularProgressIndicator(),
),
));
}
}),
Related
I want to add the code below to my existing card constructor but I am unable to do so
child: Container(
height: 50,
width: 100,
child: FutureBuilder<Uri>(
future: createDynamicLink(), //return link
builder: (context, snapshot) {
if (snapshot.hasData) {
Uri? uri = snapshot.data;
return FlatButton(
color: Colors.amber,
onPressed: () => FlutterShare.share(title: 'Example share',
text: 'Example share text',
linkUrl: uri.toString(),
chooserTitle: 'Example Chooser Title'),
child: Text('Share'),
);
}
}),
),
And this is the card widget with which I want to add the future function
child: Container(
margin: const EdgeInsets.only(top: 120.0),
child: GridView(
physics: BouncingScrollPhysics(),
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
children: events.map((title){
return Scaffold(body:
Container(decoration: BoxDecoration(
image:DecorationImage(
image: AssetImage("assets/bg.png"), fit: BoxFit.cover),),
return GestureDetector(
child: Card(
margin: const EdgeInsets.all(14.0),
),
onDoubleTap: () {
Fluttertoast.showToast(msg: "msg");
},
);
}).toList(),
),
I want to be able to use the future function along with the flutterShare functionality when I click on one of the grid card
The event list used above:
List<String> events = [
"Emergency SMS",
"Call",
"Navigation"
];
Truly appreciate any help!
I need ripple effect when tap image like facebook my day. Use Ink.image for grid view image not work in my code. I want to ripple when on tap action trigger on my image but my code only work for pressing. Also add the Material widget to the parent of Ink.image widget. Please solve me.
This is my code.
Expanded(
child: GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2),
controller: _scrollController,
padding: EdgeInsets.all(8.0),
itemCount: _agentsList.length,
shrinkWrap: true,
physics: ClampingScrollPhysics(),
itemBuilder: (BuildContext context, int index) {
return Stack(
children: [
Container(
margin: EdgeInsets.all(margin),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(19.0)),
child: Material(
clipBehavior:Clip.hardEdge,
child: Ink.image(
image: CachedNetworkImageProvider(
_agentsList[index].agentPhoto,
),
fit: BoxFit.cover,
child: InkWell(
splashFactory:InkSplash.splashFactory,
onTap: () {
widget.viewType =
Agent.current != null
? "hello"
: "";
Navigator.of(context)
.pushNamed('/ProfileView',
arguments: {
"agent":
_agentsList[index]
});
},
),
)
),
),
),
],
);
}))
I have a simple json parser and listing the news and their categories
now I am trying to do some optimisations on ListTile because I would like to use the news Images bigger and put the news title under but ListTile provide only trailing which it is unusable for me. But I can't add any styling in whole code (new child, Row, etc gives error.) Is it possible to do that in this structure or should I make a customListTile on another page and link the current mechanism to new page?
any help would be really nice
body: Container(
padding: const EdgeInsets.all(
10.0,
),
child: FutureBuilder<Articles>(
future: _futureArticles,
builder: (BuildContext context, AsyncSnapshot<Articles> snapshot) {
if (snapshot.hasData) {
final articles = snapshot.data?.data;
return ListView.builder(
padding: const EdgeInsets.all(
10.0,
),
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount: articles!.length,
itemBuilder: (BuildContext context, int index) {
return Card(
elevation: 4.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: ListTile(
title: Text(
'Title: ${articles[index].title}',
),
subtitle:
Text('Category: ${articles[index].category?.name}'),
trailing: Image.network(articles[index].imageUrl!),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => NewsViewDetail(
id: articles[index].id!,
),
fullscreenDialog: true,
),
);
},
),
);
},
);
} else if (snapshot.hasError) {
return NewsError(
errorMessage: '${snapshot.hasError}',
);
} else {
return const NewsLoading(
text: 'Loading...',
);
}
},
),
),
);
}
}
Try below answer hope its help to you ,use GridView.builder() instead of ListView.builder()
Container(
padding: EdgeInsets.all(10),
child: GridView.builder(
itemCount: 5,//use your length here(articles!.length)
physics: NeverScrollableScrollPhysics(),
shrinkWrap: true,
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 1),
itemBuilder: (context, index) {
return Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey.shade200),
),
margin: EdgeInsets.all(5),
padding: EdgeInsets.all(5),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Image.network(
'your network image here',
fit: BoxFit.fill,
),
),
SizedBox(
height: 15,
),
Text(
'Your headline here',
style: TextStyle(
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
],
),
);
},
),
);
your screen look like ->
I'm new to Flutter and I like the PageView widget, but how do I always have an AppBar or other elements on top?
Now PageView is changing the entire page, along with the AppBar, how can you pin it? To make the pages scroll under the AppBar
Scaffold(
body: Stack(
children: [
Padding(
padding: EdgeInsets.only(top: 50),
child: Container(
width: double.infinity,
height: 100,
color: Colors.blue,
),
),
FutureBuilder(
future: _futureMenu,
builder: (context, snapshot){
if(snapshot.hasData){
return PageView.builder(
itemBuilder: (context, position) {
return PageForPosition();
},
itemCount: snapshot.data.length, // Can be null
);
} else if (snapshot.hasError){
}
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
),
],
),
)
Place the AppBar widget in scaffold appBar parameter.
Scaffold(
appBar: AppBar(),//<-- Move appbar here.
body: Stack(
children: [
FutureBuilder(
future: _futureMenu,
builder: (context, snapshot){
if(snapshot.hasData){
return PageView.builder(
itemBuilder: (context, position) {
return PageForPosition();
},
itemCount: snapshot.data.length, // Can be null
);
} else if (snapshot.hasError){
return Center(child:Text('Error'));
}
return Container(
child: Center(
child: CircularProgressIndicator(),
),
);
}
),
],
),
)
Check this dart pad.
You could try use sliverAppbar code like this
SliverAppBar(
expandedHeight: 300.0,
pinned: true,
Pinned allows it to stay fixed to the top if you need additional help on this way of creating an app bar let me know happy to help further explain
You can use CustomScrollView like below to gain your UI and effect.
CustomScrollView(
slivers: <Widget>[
const SliverAppBar(
pinned: true,
expandedHeight: 250.0,
flexibleSpace: FlexibleSpaceBar(
title: Text('Demo'),
),
),
SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 200.0,
mainAxisSpacing: 10.0,
crossAxisSpacing: 10.0,
childAspectRatio: 4.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.teal[100 * (index % 9)],
child: Text('Grid Item $index'),
);
},
childCount: 20,
),
),
SliverFixedExtentList(
itemExtent: 50.0,
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
alignment: Alignment.center,
color: Colors.lightBlue[100 * (index % 9)],
child: Text('List Item $index'),
);
},
),
),
],
)
I am new in flutter. In my application, I fetch the data from URL and view it. Now I want to add onTap listener which will pass the id to the function. Any idea how can I do it.
return GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount:snapshot.data.length,
itemBuilder:(BuildContext context, int index) {
final x = snapshot.data[index];
return Card(
child: Column(
children: <Widget>[
Image.network(
'https://thegreen.studio/ecommerce/default/upload/' +x.Image,
width: 200.0,
height: 150.0,
fit: BoxFit.cover,
),
Text(x.Description),
Text("Price: RM:134"),
],
),
);
},
);
You can wrap Card widget with GestureDetector:
GestureDetector(
onTap: () {
// Code
},
child: Card(
...
),
)
#BeHappy is right. You can use GestureDetector to listen to the onTap function. You can pass the id of the indexed item into your method. It will look like this:
return GridView.builder(
gridDelegate:
SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index) {
final x = snapshot.data[index];
return GestureDetector(
onTap: () {
// You can pass the id of indexed item.
yourMethod(x.id);
},
child: Card(
child: Column(
children: <Widget>[
Image.network(
'https://thegreen.studio/ecommerce/default/upload/' + x.Image,
width: 200.0,
height: 150.0,
fit: BoxFit.cover,
),
Text(x.Description),
Text("Price: RM:134"),
],
),
),
);
},
);