I'm writing my first app with flutter and came onto the problem that an InkWell does not detect when it's tapped. It's a more complicated structure than I could find examples for. I wrote the following function:
class ChatOverviewElements {
static Widget buildChatEntry(BuildContext context, String username,
String lastMessageText,
String lastMessageDate, bool group,
int unread, int chatID) {
return new Material(
child: new Ink(
padding: const EdgeInsets.only(right: 32.0),
child: new InkWell(
onTap: ChatOverviewNavigation.openChat(context, chatID),
child: new Row(
children: <Widget>[
new Container(
padding: const EdgeInsets.all(10.0),
child: new Icon(
Icons.account_circle,
size: 60.0,
),
),
new Expanded (
child: new Container(
padding: const EdgeInsets.only(right: 5.0),
height: 60.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Row(
children: <Widget>[
group ? new Icon(Icons.group) : new Container(),
new Container(width: group ? 10.0 : 0.0,),
TextStyles.username(username),
],
),
TextStyles.chatSnippet(lastMessageText),
],
),
),
),
new Column(
children: <Widget>[
new Row(
children: <Widget>[
new Icon(
Icons.done_all,
color: Colors.green,
),
new Container(width: 8.0,),
TextStyles.chatDate(lastMessageDate),
]),
new Icon(
Icons.thumb_up,
color: Colors.grey[500],
)
],
),
],
),
),
),
);
}
}
It creates a box like you'd see in WhatsApp etc. with username, message preview, unread badge (the thumb up icon is a placeholder for that) and so on. What I want it for that outer Container to be tappable, so I changed it so and Ink (to see the ripple) and added and InkWell and everything else as a child of that well. That does not work. It doesn't detect the tap a all and I don't understand why.
The build function is called to create the children of a ListView, which itself is nested inside a Scaffold and a Material App. That shouldn't matter though, I tried simple examples from StackOverflow within the ListView and those work just fine.
So the question is: what am I doing wrong here? Where would that InkWell have to be so the whole container is tapable and a ripple is shown on the container background ?
onTap: ChatOverviewNavigation.openChat(context, chatID),
should be
onTap: () => ChatOverviewNavigation.openChat(context, chatID),
otherwise the result of ChatOverviewNavigation.openChat(context, chatID) will be used as onTap handler.
Related
I've very much a beginner in Dart and Flutter, and my project is to learn while building an app. I've learned the basics with an online class and I have basis in Java.
Now, in my homepage, I'm trying to have 4 buttons take the whole screen. My current layout is to have them all take an equal amount of space and be stacked vertically.
Problem is, I can't find a way to make the RaisedButton fill automatically. I've tried retrieving the height of the screen and dividing that between the buttons but it's not working. Here's how I do it :
First, the homescreen layout:
class Homescreen extends StatelessWidget {
Widget build(context) {
double height = MediaQuery.of(context).size.height - 60;
return Scaffold(
body: SafeArea(
child: ListView(
children: [
PlanningButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
BookingButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
ModifyButton(height),
Container(margin: EdgeInsets.only(top: 20.0)),
CancelButton(height),
],
),
),
);
}
As you can see, I pass the height argument to my buttons all built around this model:
Widget PlanningButton(double pixel_y) {
return RaisedButton(
padding: EdgeInsets.all(pixel_y / 8.0),
onPressed: () {}, //goes to the planning screen
color: Colors.blue[200],
child: Text("Planning"),
);
}
Yet, it's never quite right. I don't think it's taking into account the notification bar or the navigation bar.
I suspect there is a workaround that involves wrapping the buttons into a container or using a different kind of widget that have button-like properties but I can't find what suits my needs.
Thanks for any help !
edit: I'm basically trying to do this
Try removing the variable height logic, and simply wrap your buttons in Expanded widgets. This is pretty much what it was built for.
Check it out here: https://api.flutter.dev/flutter/widgets/Expanded-class.html
You could use a Column and Expanded to do the job. If you want to make your Column scrollable, you can wrap it with SingleChildScrollView. I used SizedBox instead of Container to make the spacing because it is way more efficient and is designed for it.
class Homescreen extends StatelessWidget {
Widget build(context) {
double height = MediaQuery.of(context).size.height - 60;
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: PlanningButton(height)
),
SizedBox(height:20),
Expanded(
child: BookingButton(height),
),
SizedBox(height:20),
Expanded(
child: ModifyButton(height),
),
SizedBox(height:20),
Expanded(
child: CancelButton(height),
),
],
),
),
);
}
If 4 buttons are the only widgets, you dont need to use ListView just use a Column with mainAxisAlignment: MainAxisAlignment.spaceEvenly
class Sample extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
child: Container(
color: Colors.red,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.blue,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.green,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
Expanded(
child: Container(
color: Colors.yellow,
child: Center(
child: RaisedButton(
onPressed: () {},
child: Text("button"),
),
),
),
),
],
),
),
);
}
}
Before you read this, it's not the best way to do things but it's one I'm using at least for prototyping. You may find using a container with a list and the argument MainAxisAlignment to work better for you.
A lot of comments here might give a solution that works for you but here's mine. I got it to work like I wanted by using SizedBox.
First, I recovered the width of the screen, then I created the buttons and put them into SizedBox fitting the screen's width, I put them in a Column and I added a few Container for the style points.
Result:
Code :
class Homescreen extends StatelessWidget {
Widget build(context) {
double width = MediaQuery.of(context).size.width; //getting screen width
return Scaffold(
body: SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(margin: EdgeInsets.only(bottom: 20.0)),
PlanningButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
BookingButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
ModifyButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
CancelButton(width),
Container(margin: EdgeInsets.only(bottom: 20.0)),
],
),
),
);
}
Widget PlanningButton(double width) {
return Expanded(
child: SizedBox(
width: width - 20,
child: RaisedButton(
onPressed: () {},
color: Colors.blue,
child: Text(
"planning",
textScaleFactor: 4.0,
),
),
//fit: BoxFit.cover,
),
);
}
The user can tap anywhere on the colored buttons and it will register. Now I'll add images and transparency to make it look good!
I have a column: header with text, body with image, footer with text, all widgets have transparent backgrounds.
I want to set the background using a blur of the main image but I keep reaching dead ends.
In some situations this would be straight forward but in my scenario the image could be of any size and aspect ratio, and I need the effect to be wrapped with the column.
Here are my two failed attempts:
Method 1
I have a Stack with the image as the first item, then a BackdropFilter with ImageFilter blur, then my Column.
This works but the Image bleeds out from under the Column because of the image size (which can be any size).
I want to constrain it to the height of my Column.
return Container(
child: Stack(
alignment: AlignmentDirectional.topCenter,
children: <Widget>[
Positioned.fill(child: Image.network(_imgUrl)),
BackdropFilter(
filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: Container(
decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
)),
Container(
child: Column(
mainAxisSize: MainAxisSize.min,
// https://stackoverflow.com/a/41846093/3429021
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Header(),
BodyPhoto(),
Footer()
],
),
),
],
),
Method 2
Putting the column in a Container with a DecorationImage, which sizes the image perfectly, but I have no way of applying the blur effect.
(_streamItem is my Column wrapped in a container)
body: Container(child: _streamItem,
decoration: new BoxDecoration(image: DecorationImage(
image: NetworkImage(_streamItem.imgUrl),
fit: BoxFit.cover)
)
)
Any ideas?
I think you can consider using Positioned widget - it has width and height property. We can combine these widgets: Positioned > ClipRect > BackdropFilter. Please refer to the Gist: https://gist.github.com/anticafe/dc84cf6488d9defea437b702b13e2749#file-blur_multiple_widgets_with_dynamic_region-dart
Let take a look at this article to see more about BackdropFilter.
You can explicitly give a fix height to the container that contains the image, which will even look better.
In this example I have set three images of very different dimensions and has no problem rendering.
Refer the below code:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('So Help'),
),
body: new ListView(
children: <Widget>[
MyContainer(
imageUrl:
'https://i.dailymail.co.uk/i/pix/2017/01/16/20/332EE38400000578-4125738-image-a-132_1484600112489.jpg',
),
MyContainer(
imageUrl:
'http://static.guim.co.uk/sys-images/Guardian/Pix/pictures/2014/4/11/1397210130748/Spring-Lamb.-Image-shot-2-011.jpg',
),
MyContainer(
imageUrl:
'http://wackymania.com/image/2011/6/vertical-panoramic-photography/vertical-panoramic-photography-15.jpg',
),
],
),
);
}
}
class MyContainer extends StatelessWidget {
final String imageUrl;
MyContainer({#required this.imageUrl});
#override
Widget build(BuildContext context) {
return new Container(
height: 300.0,
child: new Stack(
children: <Widget>[
new Container(
child: Image.network(
this.imageUrl,
width: MediaQuery.of(context).size.width,
fit: BoxFit.cover,
),
),
BackdropFilter(
filter: Dui.ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
child: new Container(
color: Colors.transparent,
),
),
new Container(
height: 300.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width,
),
Padding(
padding: const EdgeInsets.all(20.0),
child: new Text(
'Header',
style: new TextStyle(color: Colors.white),
),
),
new Expanded(
child: Image.network(imageUrl),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: new Text(
'Footer',
style: new TextStyle(color: Colors.white),
),
),
],
),
)
],
),
);
}
}
I have this code for a chat app that renders a series of messages. The thing is page is showing ok, but when trying to send a message rendering overflow appears. It's like my input is going all the way up instead of setting itself over my displayed keyboard.
This is my code for rendering the page
return Scaffold(
body: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: ListView.builder(
itemBuilder: (_, index) => _messages[index],
itemCount: _messages.length,
//El reverse hace que vaya de abajo hacia arriba
reverse: true,
padding: EdgeInsets.all(6.0),
),
),
Divider(
height: 1.0,
),
Container(
child: _buildComposer(),
decoration: BoxDecoration(color: Theme.of(context).cardColor),
)
],
),
);
And here I have my code for the input where think the mistake is
Widget _buildComposer() {
return IconTheme(
data: IconThemeData(color: Theme.of(context).accentColor),
child: Container(
margin: const EdgeInsets.symmetric(horizontal: 9.0),
child: Row(
// mainAxisSize: MainAxisSize.min,
children: <Widget>[
Flexible(
child: TextField(
controller: _textController,
onChanged: (String texto) {
setState(() {
_isWriting = texto.length > 0;
});
},
onSubmitted: _enviarMensaje,
decoration:
InputDecoration.collapsed(hintText: "Envie un mensaje!"),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 3.0),
child: IconButton(
icon: Icon(Icons.message),
onPressed: _isWriting
? () => _enviarMensaje(_textController.text)
: null,
),
)
],
),
),
);
}
Here are my print captures for initial rendering, after clicking inside the input to write some message
Here's my log, and it's supposed to be easy to understand the approach I should take but I'm not having any luck with it.
FYI: I have already tried this approach but did not seem to work
StackOverflow answer on rendering
I have already gone through flutter.io docs but I'm not understanding the whole listview theory. If you have some insights I would appreciate them as well so I can deeply understand how it behaves.
resizeToAvoidBottomPadding: false might help.. have a look here
As #diegoveloper's comment, it will not resize which means it will not show content behind keyboard. Based on your use case you can choose option 1 or 2 in the above link
appBar: new AppBar(
leading: Stack(
children: <Widget>[
IconButton(
icon: const Icon(Icons.arrow_forward),
onPressed: () {
_nextPage(1);
},
tooltip: 'Next',
padding: EdgeInsets.only(left: 360.0),
),
IconButton(
icon: const Icon(Icons.arrow_back),
onPressed: () {
_nextPage(-1);
},
tooltip: 'Previous',
),
],
),
),
Blockquote
The two IconButtons , the first one doesn't work but the second does , when you remove the padding it works fine , How should i do this ? , and using Containers wouldn't help as much because they take space too , so what to do ?
You have many errors there .
First
You are using a Stack, stack will put your widgets over the other, so you have to specify the position using Positioned or Align.
Second
If you check the source code , you'll find there is a width limit for the leading Widget.
if (leading != null) {
leading = new ConstrainedBox(
constraints: const BoxConstraints.tightFor(width: _kLeadingWidth),
child: leading,
);
}
where _kLeadingWidth = 56
1st Solution
Replace your Stack widget by Row widget, if you do this, you'll get an overflow exception because the size of your two IconButtons exceed the width > 56.
Final Solution (you can find more)
Remove your IconButton and use an Icon wrapped by InkWell (in order to receive the tap)
return Scaffold(
appBar: new AppBar(
leading: Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
InkWell(
onTap: () => print("1"),
child: Padding(
padding: EdgeInsets.all(2.0),
child: const Icon(Icons.arrow_forward))),
InkWell(
onTap: () => print("2"),
child: Padding(
padding: EdgeInsets.all(2.0),
child: const Icon(Icons.arrow_back))),
],
),
),
);
So, I need to make a Text widget to have an exact number of lines. In android studio, I only need to add property android:Lines = 2 and then the TextView will be 2 lines, regardless of how long the text is (if less than 2 lines, then fill the second line with an empty space) and regardless of what's the user's device font size.
The problem is, I have difficulty in replicating such behavior in flutter dynamically. The screenshot below works only on a particular user device's fontSize, since it uses an exact height (32.0).
new Container(
height: 32.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Text('Curry Rice'), maxLines: 2, overflow: TextOverflow.ellipsis))
])
)
The problem arise when user is increasing / decreasing their device's font size, it will make the fixed-height container's doesn't work anymore.
So, any idea how to replicate android:Lines behavior in flutter Text widget regardless of the user's device text size?
UPDATE: Added comprehensive code for better context
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// final wordPair = new WordPair.random();
return new MaterialApp(
title: 'App Title',
theme:
new ThemeData(primaryColor: Colors.white, accentColor: Colors.blue),
home: new Scaffold(
appBar: new AppBar(
title: new Text('App Title'),
actions: <Widget>[
new IconButton(icon: new Icon(Icons.list), onPressed: null),
],
),
body: new Center(
child: new Padding(
padding: new EdgeInsets.all(16.0),
child: new TestWidget()))));
}
}
class TestWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new SizedBox(
width: 150.0,
child: new Card(
child: new Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Image.asset(
'assets/thumb2.jpg',
color: Colors.red,
),
new InkWell(
onTap: () {
// _showMenuDescription(context);
},
child: new Padding(
padding: new EdgeInsets.all(8.0),
child: new Column(
children: <Widget>[
new Container(
height: 32.0,
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new Expanded(
child: new Text(
'Curry Rice With Tandoori Chicken and Sunny Side Fried Egg',
maxLines: 2,
overflow: TextOverflow.ellipsis),
)
]),
),
new Container(height: 8.0),
new Row(
children: <Widget>[
new Expanded(
child: new Text(
'BBQ Sauce',
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: new TextStyle(color: Colors.black45),
),
),
new Padding(
padding: new EdgeInsets.only(left: 8.0),
child: new Text(
'20,000',
maxLines: 1,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.end,
style: new TextStyle(
color: const Color(0xffffa000)),
))
],
),
],
))),
],
),
));
}
}
The problem is that you are setting a finite height for your column. And that height is not enough to display 2 lines with this text style.
Increase the column height or remove that constraint entirely should solve the problem.