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:
Related
I have an AppBar widget that works perfectly on an emulator and on my phone via USB, but after I build the apk and test it, the AppBar is completely grey. Pressing on the supposed locations of the action buttons doesn't do anything either. It's just gone.
Widget build(BuildContext context) {
final bokBar = AppBar(
elevation: 0,
flexibleSpace: Expanded(
child: Container(color: Colors.grey),
),
);
final appBar = AppBar(
shadowColor: Colors.transparent,
title: Text(
'To-Do List',
style: TextStyle(
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
flexibleSpace: Expanded(
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Theme.of(context).primaryColor,
Theme.of(context).scaffoldBackgroundColor,
]),
),
),
),
actions: [
IconButton(
onPressed: () async {
FirebaseAuth.instance.signOut();
},
icon: const Icon(Icons.logout),
)
],
);
It's because of the flexibleSpace I am using to customize the AppBar. Removing it results in a functioning but regular AppBar. I know what part of the Widget is causing it, but I don't know why and how to fix it without getting rid of it.
Tested on Android 9 and Android 12.
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'm not sure if this is possible or not, What I am looking to do is remove a container if the switch is in the ON position and reappear the container in the OFF position. I created the switch and the container inside a stateful widget. the code is below.
Container(
color: Colors.yellow,
child: Center(
child: Switch(value: ads,
onChanged: (value){
setState(() {
ads = value;
print(value);
});
},
activeTrackColor: Colors.lightGreenAccent,
activeColor: Colors.green,
),
),
),
Padding(padding: EdgeInsets.fromLTRB(100.0, 0.0, 5.0, 10.0)),
Container(
color: Colors.red,
child: Text("Remove the red container if switch is ON"),
),
A image of the following is below
Any help would be appreciated.
Replace your Container section with the following
!ads ? Container(
color: Colors.red,
child: Text("Remove the red container if switch is ON"),
) : SizedBox(),
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,
),
),
),
),
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: () {
},
),