Context: I'm rewriting my Android app with Flutter. On Android, there was this interesting touch feedback effect when setting clickable View's background property to ?android:selectableItemBackgroundBorderless:
Note that the red border wasn't in the real UI, it's there just to show View's borders. As you can see, the ink forms a circle that is circumscribed around the rectangular view.
I would like the ink in my Flutter app to be also circumscribed around the view, i.e. the selection area needs to be circular and to encompass the view. I'm trying to achieve this by using InkResponse component, but the result looks miserable:
The body of the Scaffold used in the example:
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkResponse(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
width: 200.0,
height: 200.0,
),
highlightColor: Colors.transparent,
),
),
),
),
If I make the radius property of the InkResponse big enough, it can go beyond the view's bounds, and if my view had static size, I could tweak the property to achieve the desired effect, but in my real app it's dynamic.
Is it possible to do it without making a custom component?
For these purposes, I think InkResponse should be used:
Container(
width: 80,
height: 80,
child: InkResponse(radius: 110, onTap: () {}, child: Text("text")));
Working Example
Have you tried this, its click is bound into the red area.
Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Material(
color: Color(0xff008080),
child: Center(
child: InkWell(
onTap: () {
/* ... */
},
child: Container(
child: Center(
child: Text('BUTTON'),
),
decoration: BoxDecoration(
border: Border.all(color: Colors.red),
),
),
highlightColor: Colors.transparent,
),
),
),
),
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 have a Flutter app which I'm building for Android. The structure goes broadly like this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: SingleChildScrollView(
child: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: ...
),
)
);
}
The goal here is to have the gradient background fill all the screen below the app bar, and if the content is larger than that space then to make it scrollable.
If I omit the SingleChildScrollView, the Container fills the space. But of course if it overflows then there is no scrolling. With the code as above, the scroll view does its thing on small screens but on large screens the gradient background doesn't fill the whole available area.
If I change it around like this:
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("")),
body: Container(
decoration: const BoxDecoration(
gradient: ...
),
child: Column(children: [
SingleChildScrollView(
child: ...
),
Expanded(child:Container())
]),
)
);
}
then the gradient fills the background but the scroll view doesn't do the right thing - the content overflows the screen but can't be scrolled. How do I get it to do both?
The reason you're facing this issue is that your container is inside the SingleChildScrollView Widget and is getting scrolled along the SingleChildScrollView Widget. And Removing the SingleChildScrollView will result in renderflex overflow error
The Expanded keyword will throw incorrect use of ParentDataWidget
Also, you have added SingleChildScrollView widget inside the column you have to swap these well
Here is an example that I have given which will help you achieve it.
Widget build(BuildContext context) {
return Scaffold(
body: Container(
// Add The Container gradient here
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
child: Column(
children: [
Container(
height: 100,
width: 50,
color: Colors.red,
),
Container(
height: 100,
width: 50,
color: Colors.blue,
),
Container(
height: 1000,
width: 50,
color: Colors.yellow,
),
Container(
height: 1000,
width: 50,
color: Colors.orange,
),
],
)),
));
}
I have a Container widget in which all my codes are in for the particular page. It has a background image and inside the container, there is a Center widget. I want to set the background color of the center widget to white but while doing so, the entire screen's background is changing to white. How can I achieve that please?
return Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('Assets/images/loginbg2.jpg'),
fit: BoxFit.cover
),
),
child: Scaffold(
backgroundColor: Colors.transparent, //code for background image
body: Center(
child:Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topLeft,
child: Padding(
padding: EdgeInsets.fromLTRB(40, 0, 0, 0),
child: Text(
"Welcome back!",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 30.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
)
),
SizedBox(
height: 20.0,
), //code for center widget
This is probably because the Column widget inside your Center widget is taking up the entire screen.
A Column widget (unless constrained) is taking up all the space it can get.
Try solving your issue by removing the Column widget for now and only use the container inside the Center widget and define it's height and width. See if the background you want is coming back in view.
I am new to flutter learning a flutter UI build from youtube. While I am using the expanded widget, I found the output is not what I want, just wanna ask is there any way to limit the height of the expanded widget.
This is my current UI looks like.
SafeArea(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Align(
alignment: Alignment.topRight,
child: Container(
alignment: Alignment.center,
height: 52,
width: 52,
decoration: BoxDecoration(
color: Color(0xFFF2BEA1),
shape: BoxShape.circle,
),
child: SvgPicture.asset("icons/icons/menu.svg"),
),
),
Text(
"\t\tMake Cents out of \n\t\tSolar",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 38,
color: Colors.blueGrey[900]),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 30, vertical: 5),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(29.5),
),
child: TextField(
decoration: InputDecoration(
hintText: "Search",
icon: SvgPicture.asset("icons/icons/search.svg"),
border: InputBorder.none,
),
),
),
),
Expanded(
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: .85,
children: <Widget>[
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
CategoryCard(
title: "Promotion of the day",
svgSrc: "icons/icons/Hamburger.svg",
press: () {},
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(20.0, 0, 0, 0),
child: Text(
"Solar Panel",
style: Theme.of(context).textTheme.subtitle1!.copyWith(
fontWeight: FontWeight.w900,
fontSize: 20,
color: Colors.black),
),
),
],
I wanna know is there any way to control the height of the expanded widget so that my container with text can connect right below the custom Category Card. Or should I use another widget instead of using the expanded widget?
By definition, the Expanded widget will fill up all the remaining screen space. If you instead want to use a set size, you can use a Container or SizedBox with their width and height parameters.
To get a better understanding of constraints in general, I suggest you check out this flutter documentation page all about constraints.
To set a minimum and maximum size (width and height) for a widget you can use ConstrainedBox widget, learn more about it here
You can't control the height of the Expanded widget. It takes all the space that is available on the screen. I suggest you to use SizedBox and explicitly provide the required height and set width as double.infinity.
I had same issue. I suggest ConstrainedBox widget to set minimum and maximum heights.
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: