Related
I'm trying to use InkWell to get a ripple effect on top of an image inside of a GridTile when the user taps on the tile.
I believe the image itself is obscuring the ripple because when I remove the image, I see the ripple.
Below is the code for a single GridTile.
return new InkWell(
onTap: () => debugPrint(s.displayName),
highlightColor: Colors.pinkAccent,
splashColor: Colors.greenAccent,
child: new GridTile(
footer: new GridTileBar(
title: new Text(s.displayName),
subtitle: new Text(s.gameName),
backgroundColor: Colors.black45,
trailing: new Icon(
Icons.launch,
color: Colors.white,
),
),
child: new Image.network( //this is obscuring the InkWell ripple
s.imageSrc,
fit: BoxFit.cover,
),
),
);
I've tried moving the InkWell to different levels of the hierarchy, using DecorationImage inside a Container, but none of these seem to work to reveal the ripple.
How can I get the ripple to appear on top of the tile/image?
I was able to get a ripple to appear over the image by using a Stack and wrapping the InkWell in a Material widget.
return new Stack(children: <Widget>[
new Positioned.fill(
bottom: 0.0,
child: new GridTile(
footer: new GridTileBar(
title: new Text(s.displayName),
subtitle: new Text(s.gameName),
backgroundColor: Colors.black45,
trailing: new Icon(
Icons.launch,
color: Colors.white,
),
),
child: new Image.network(s.imageSrc, fit: BoxFit.cover)),
),
new Positioned.fill(
child: new Material(
color: Colors.transparent,
child: new InkWell(
splashColor: Colors.lightGreenAccent,
onTap: () => _launchStream(s.displayName),
))),
]);
I think this would be a better way to show ripple effect over image.
Ink.image(
image: AssetImage('sample.jpg'),
fit: BoxFit.cover,
child: InkWell(
onTap: () {},
),
),
The root cause is that Flutter renders views in descending order. when we put our image as the child of InkWell, the effect is covered by that image.
Find out more references here:
The Ink widget
Create a Rounded Image Icon with Ripple Effect in Flutter
Using Stack we can bring Material and InkWell over the image. To stretch Material we are going to use Positioned.fill widget.
Stack(
children: <Widget>[
Image( ... ),
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
onTap: () { ... },
),
),
),
],
);
DartPad | Gist
Screenshot
This screenshot is taken from given dartpad link.
We have created this simple Widget to paint an ink reaction on top of any given child.
class InkWrapper extends StatelessWidget {
final Color splashColor;
final Widget child;
final VoidCallback onTap;
InkWrapper({
this.splashColor,
#required this.child,
#required this.onTap,
});
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
child,
Positioned.fill(
child: Material(
color: Colors.transparent,
child: InkWell(
splashColor: splashColor,
onTap: onTap,
),
),
),
],
);
}
}
Screenshot:
SizedBox(
height: 200,
child: Ink(
decoration: BoxDecoration(
image: DecorationImage(
image: ExactAssetImage("chocolate_image"),
fit: BoxFit.cover,
),
),
child: InkWell(
onTap: () {},
splashColor: Colors.brown.withOpacity(0.5),
),
),
)
wrap InkWell inside Material Widget
Material(
child : InkWell(
child : YourWidget
)
)
I added circular buttons in my flutter mobile app but when I tap or click on them, those buttons gets converted to square buttons. I am adding my code below, please let me know what I am doing wrong, your help will be highly appreciated. Thanks,
child: Material(
color: Colors.black,
shape: CircleBorder(),
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.white12,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.home),
color: Colors.white70,
onPressed: () {
bool isGR = Game.of(context).isGameRunning();
if (isGR) {
Game.of(context).pause();
}
TapboxA.of(context).backToSplash();
},
),
),
),
),
I am adding images as well below:
When I design this app layout in device with larger display It works perfectly fine(1920 x 1080) But when I run app in device with smaller screen bottom buttons are not showing..What can I do for this? Is mediaquery support for column widget...? Should I have to use another method instead of Mediaquery?
This is main dart....//Run app not included//
return ResponsiveWidget(
builder: (context,constraints){
return Stack(
children: <Widget>[
new Container(
decoration:new BoxDecoration(
image: new DecorationImage(
image: new AssetImage(_Image()()),
fit: BoxFit.cover,
),
),
),
Scaffold(
backgroundColor:Colors.transparent,
appBar:AppBar(
backgroundColor:Colors.transparent,
elevation:0.0,
),
drawer:Drawer(
child: ListView(
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header',
style:TextStyle(
fontSize: 30.0,
),
),
decoration: BoxDecoration(
color: Colors.green[300],
),
)],
),
),
body:Column(
children: <Widget>[
Row(
crossAxisAlignment:CrossAxisAlignment.center,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children: <Widget>[
SizedBox(width:10,height:10,),
Text(
"NAME",
style:TextStyle(
fontSize:40.0,
fontWeight:FontWeight.bold,
color:Colors.white,
),
),
SizedBox(width:10),
],
),
SizedBox(height:20),
GestureDetector(
onTap:(){
print("Clicked");
},
child: CircleAvatar(
radius:80,
backgroundImage:_decideImageView(),
),
),
SizedBox(height: 30,),
Text("Text",
style:TextStyle(
fontStyle:FontStyle.italic,
fontSize:15,
color:Colors.white,
),
),
SizedBox(height: 10,),
Text("Text",
style:TextStyle(
fontFamily:'mrsmonster',
fontSize:20,
color:Colors.white,
),
),
SizedBox(height:50,),
FlatButton(child:Text(
"TExt",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#149da5'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
SizedBox(height:10,),
FlatButton(child:Text(
"Text",
style:TextStyle(
fontWeight:FontWeight.bold,
fontSize:30,
color:Colors.white,
),
),
shape: RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
//side: BorderSide(color: Colors.red)
),
color:Hexcolor('#f4856b'),
padding:EdgeInsets.fromLTRB(30, 20, 30, 20),
onPressed: (){
setState(() {});
},
),
],
),
)
]
);
);
This is Responsive Widget
import 'package:app/SizeInformation.dart';
import 'package:flutter/material.dart';
class ResponsiveWidget extends StatelessWidget {
final AppBar appBar;
final Drawer drawer;
final Widget Function(BuildContext context,SizeInformation constraints) builder;
ResponsiveWidget({#required this.builder,this.appBar,this.drawer});
#override
Widget build(BuildContext context) {
var width = MediaQuery.of(context).size.width;
var height = MediaQuery.of(context).size.height;
var orientation = MediaQuery.of(context).orientation;
SizeInformation information = SizeInformation(width,height,orientation);
return Stack(children: <Widget>[
Scaffold(
drawer:drawer,
appBar:appBar,
body: builder(context,information),
),
]
);
}
}
You should use Stack inside a Scaffold body and not wrapping Scaffold with Stack. You have to use only one Scaffold in one screen. What you've done is just wrong... No wander it is not working. Whatever is in scaffold body will be automatically adjusted to your screen resolution... therefore no need to do it manually. Here is a question how to set background image without using Stack widget Flutter SDK Set Background image so there is no need to even use Stack
I am trying to implement a button without margin.
My code is :
#override
Widget build(BuildContext context) {
return new AppState(
child: new Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body:
ButtonTheme(
buttonColor: Color(0xFF031e39),
minWidth: double.infinity,
child: FlatButton(
color: Color(0xFF81A483),
onPressed: () {
launchSearch();
},
child: Text('Search',style: TextStyle(color: Colors.white),),
),
)
),
);
}
The result is :
I have tried all different ways but I cannot figure out a solution so the button has not margin.
If I put a widget on top of my button in a column I get the same results:
How can I have a FlatButton without any margin ?
According to the source. It looks like Flutter pads out buttons that are smaller than the target tap size (48 x 48), you can get around it by:
Make your button height larger than or equal to 48
or
Add materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, to your FlatButton.
I got it but making some modifications.
Instead of using a ButtonTheme and a FlatButton I used a Container and a FloatingActionButton
With Container you can set the size in the screen. With FloatingActionButton you can set the position of the button in the Scaffold, which in this case is in all the screen.
To make the button flat I putted the attribute elevation to 0.0, so the button looks like flat.
appBar: AppBar(
backgroundColor: Color(0xFF031e39),
title: Text("MY APP"),
),
body: new Container(
width: double.infinity,
child: FloatingActionButton(
backgroundColor: Color(0xFF81A483),
shape: new RoundedRectangleBorder(),
elevation: 0.0,
onPressed: () {
print("entra");
},
child: Text(
'Search',
style: TextStyle(color: Colors.white),
),
),
)
I hope this is helpful for you
use:
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
FlatButton(
textColor: GFColors.WHITE,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
child: Text(
"BLOG",
style: TextStyle(
fontSize: 12.0,
fontWeight: FontWeight.normal
),
),
onPressed: () {
},
),
I have a tab bar functionality in which I show a Donut chart and list of vehicles but I need to show which tab the user selected for that I have indicatorColor in TabBar but I need to fill with gradient line as shown in the image please help me out.
PS: If possible please let me know how to give theme color means primary color in main as a gradient???
return Scaffold(
body: new DefaultTabController(
length: 2,
child: new Column(
children: <Widget>[
new Container(
width: 1200.0,
child: new Container(
color: Colors.white,
child: new TabBar(
labelColor: Colors.black,
tabs: [
Tab(
child: new Text("Visual",
style: new TextStyle(fontSize: 20.0)
),
),
Tab(
child: new Text("Tabular",
style: new TextStyle(fontSize: 20.0)),
),
],
),
),
),
new Expanded(
child: new TabBarView(
children: [
Tab(
child: new RefreshIndicator(
child: new Text('DONUT CHART'),
onRefresh: refreshList,
key: refreshKey1,
),
),
Tab(
child: new RefreshIndicator(
child: new Text('List of vehicles'),
onRefresh: refreshList,
key: refreshKey2,
),
),
],
),
),
],
),
),
);
Instead of changing core files here is a better answer that worked for me.
TabBar(
controller: tabController,
indicatorPadding: EdgeInsets.all(0.0),
indicatorWeight: 4.0,
labelPadding: EdgeInsets.only(left: 0.0, right: 0.0),
indicator: ShapeDecoration(
shape: UnderlineInputBorder(
borderSide: BorderSide(
color: Colors.transparent,
width: 4.0,
style: BorderStyle.solid)),
gradient: LinearGradient(colors: [pinkLight, pinkDark])),
tabs: <Widget>[
Center(
child: Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Rating",
style: themeData.accentTextTheme.title,
),
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Category",
style: themeData.accentTextTheme.title,
),
),
Container(
alignment: Alignment.center,
color: whiteColor,
child: Text(
"Friend",
style: themeData.accentTextTheme.title,
),
),
],
),
make indicator padding to zero, label padding to zero and indicatorWeight to 4.0 or your require size after that instead of using text in tabs use Container at top and give it color.
I think the only way is to create your custom TabBar.
You can copy the code of TabBar from tabs.dart and in _TabBarState you have to change Decoration get _indicator.
Something like:
return ShapeDecoration(shape: UnderlineInputBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
UPD:
Got it. ShapeDecoration doesn't work. With it I can set gradient for whole tab. For underline - there is _IndicatorPainter class in same file. And there is Rect indicatorRect method of this class.
return Rect.fromLTWH(tabLeft, 0.0, tabRight - tabLeft, tabBarSize.height);
This string return rect for decoration. If you change it - you can get underline:
return Rect.fromLTWH(tabLeft, tabBarSize.height - 4.0, tabRight - tabLeft, 4.0);
And inside Decoration get _indicator don't forget change return UnderlineTabIndicator to
return ShapeDecoration(shape: RoundedRectangleBorder(), gradient: LinearGradient(
colors: [Colors.blue, Colors.green]));
And here's result