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: () {
},
),
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 cant seem to figure out how to make the burger icon bigger in my flutter app
here is the code for my flutter app, i am simply trying to make it bigger.....................................................................................................................................................
return new Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Colors.black),
),
extendBodyBehindAppBar: true,
drawer: Drawer(
// Add a ListView to the drawer. This ensures the user can scroll
// through the options in the drawer if there isn't enough vertical
// space to fit everything.
child: ListView(
// Important: Remove any padding from the ListView.
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header', ),
decoration: BoxDecoration(
color: Colors.black,
),
),
ListTile(
title: Text('Trip History',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Payment',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
ListTile(
title: Text('Settings',style : TextStyle(fontSize: 20.0,fontFamily:"Clan-Medium")),
onTap: () {
// Update the state of the app
// ...
// Then close the drawer
Navigator.pop(context);
},
),
],
),
),
Change your AppBar to this and then focus on the size property of the Icon, Change it as you want.
appBar: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
iconTheme: new IconThemeData(color: Colors.black),
leading: IconButton(
icon: Icon(
Icons.menu,
color: Colors.black,
size: 24.0,
),
onPressed: (){
_scaffoldKey.currentState.openDrawer();
},
)
),
You can set any icon here.
Also, as the official docs say, you can use it as well which also has an option to set ToolTip.
AppBar(
leading: Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.menu),
onPressed: () { Scaffold.of(context).openDrawer(); },
tooltip: MaterialLocalizations.of(context).openAppDrawerTooltip,
);
},
),
)
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:
Here's the current AppBar code:
AppBar(
iconTheme: IconThemeData(
color: Colors.black,
size: 100 // This isn't performing any changes
),
centerTitle: false,
backgroundColor: Colors.white,
title: Text(
title,
style: TextStyle(color: Colors.black87,
),
elevation: 1.0,
);
Current size attribute from IconThemeData not making any change.
Try this you need to use leading
A widget to display before the title.
SAMPLE CODE
AppBar(
title: new Text("Your Title"),
leading: new IconButton(
icon: new Icon(Icons.arrow_back,size: 50.0,),
onPressed: () => {
// Perform Your action here
},
),
);
OUTPUT
You can use Transform.scale widget and wrap IconButton with it. This widget has scale property which you can set based on your need. Working sample code below:
appBar: AppBar(
leading: Transform.scale(
scale: 2,
child: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {}
)
),
centerTitle: false,
backgroundColor: Colors.white,
title: Text(
'test',
style: TextStyle(color: Colors.black87,
),
// elevation: 1.0,
)),
Hope this answers your question.