How to put ripple effect on all elements in Flutter - flutter

I would like that highlightColor also take the Text and not only the background of the Material
Container(
height: 75.0,
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Material(
color: Colors.grey.shade400,
borderRadius: BorderRadius.circular(4.0),
child: Stack(
children: <Widget>[
InkWell(
onTap: (){},
highlightColor: Colors.white.withOpacity(0.7),
splashColor: Colors.transparent,
customBorder: RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0))),
const Center(
child: Text(
'Ceci est un texte',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black
)
)
)
]
)
)
)
If you have a solution!


remove Stack widget and assign the Text widget as a child of InkWell.
Container(
height: 75.0,
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 8.0),
child: Material(
color: Colors.grey.shade400,
borderRadius: BorderRadius.circular(4.0),
child: InkWell(
onTap: () {},
highlightColor: Colors.green,
splashColor: Colors.transparent,
customBorder:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(4.0)),
child: const Center(
child: Text(
'Ceci est un texte',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 18,
color: Colors.black,
),
),
),
),
),
)

Related

ripple effect in this container widget is not working

I am new to flutter and trying to apply the ripple effect on button press in this container widget through the documentation but unable to do
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: GestureDetector(
onTap: signIn,
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(12)),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
),

Inner container color is over the splash color. And to have splash effect use InkWell instead of GestureDetector
Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Material(
color: Colors.deepPurple,
child: InkWell(
onTap: () {},
splashColor: Colors.red,
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),

You can simply replace GestureDetector with InkWell widget as below.
InkWell(
onTap: signIn,
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(color: Colors.deepPurple, borderRadius: BorderRadius.circular(12)),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
)

you can use InkWell and wrap it with Material with transparant color if your container has background color;
Material(
color: Colors.transparent,
child: InkWell(
splashColor: Colors.blue,
onTap: () {},
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.deepPurple,
borderRadius: BorderRadius.circular(12)),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
))

Padding(
padding: const EdgeInsets.symmetric(horizontal: 25.0),
child: Material(
borderRadius: BorderRadius.circular(12),
color: Colors.deepPurple,
child: InkWell(
splashColor: Colors.white60,
borderRadius: BorderRadius.circular(12),
onTap: (() {}),
child: Container(
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(12)),
child: Center(
child: Text(
'Sign In',
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
),
),
),
),

Flutter 'child' and 'duration' parameter aren't defined

I don't understand why in Positioned widget, I get an error that child parameter isn't defined as well as in AnimatedContainer the 'duration' parameter isn't defined.
I checked the official documentation first, but don't know why it's not working.
https://api.flutter.dev/flutter/widgets/Positioned-class.html
https://api.flutter.dev/flutter/widgets/AnimatedContainer-class.html
class _DetailsPageState extends State<DetailsPage> {
var selectedCard = 'WEIGHT';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Details',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 18.0,
color: Colors.white)),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
)
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Positioned(
top: 75.0,
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width)),
Positioned(
top: 30.0,
left: (MediaQuery.of(context).size.width / 2) - 100.0,
child: Hero(
tag: widget.heroTag,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(widget.heroTag),
fit: BoxFit.cover)),
height: 200.0,
width: 200.0))),
Positioned(
top: 250.0,
left: 25.0,
right: 25.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(widget.foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 22.0,
fontWeight: FontWeight.bold)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(widget.foodPrice,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
color: Colors.grey)),
Container(height: 25.0, color: Colors.grey, width: 1.0),
Container(
width: 125.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.0),
color: Color(0xFF7A9BEE)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: () {},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
color: Color(0xFF7A9BEE)),
child: Center(
child: Icon(
Icons.remove,
color: Colors.white,
size: 20.0,
),
),
),
),
Text('2',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0)),
InkWell(
onTap: () {},
child: Container(
height: 25.0,
width: 25.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.0),
color: Colors.white),
child: Center(
child: Icon(
Icons.add,
color: Color(0xFF7A9BEE),
size: 20.0,
),
),
),
)
],
),
)
],
),
SizedBox(height: 20.0),
Container(
height: 150.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_buildInfoCard('WEIGHT', '300', 'G'),
SizedBox(width: 10.0),
_buildInfoCard('CALORIES', '267', 'CAL'),
SizedBox(width: 10.0),
_buildInfoCard('VITAMINS', 'A, B6', 'VIT'),
SizedBox(width: 10.0),
_buildInfoCard('AVAIL', 'NO', 'AV')
],
)
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.only(bottom:5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0), bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
color: Colors.black
),
height: 50.0,
child: Center(
child: Text(
'\$52.00',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat'
)
),
),
),
)
],
))
])
]));
}
Widget _buildInfoCard(String cardTitle, String info, String unit) {
return InkWell(
onTap: () {
selectCard(cardTitle);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: cardTitle == selectedCard ? Color(0xFF7A9BEE) : Colors.white,
border: Border.all(
color: cardTitle == selectedCard ?
Colors.transparent :
Colors.grey.withOpacity(0.3),
style: BorderStyle.solid,
width: 0.75
),
),
height: 100.0,
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15.0),
child: Text(cardTitle,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color:
cardTitle == selectedCard ? Colors.white : Colors.grey.withOpacity(0.7),
)),
),
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(info,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 14.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold)),
Text(unit,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
))
],
),
)
]
)
)
);
}
selectCard(cardTitle) {
setState(() {
selectedCard = cardTitle;
});
}
}

Solved, for some reason I didn't have my Flutter SDK path specified:
1.) Go to Settings
2.) Search Flutter
3.) Click Flutter under Languages & Frameworks
4.) Add you Flutter directory to path, in my case C:\flutter
5.) Apply & OK, Restart IDE

Why imported widget is not showing in main screen flutter

I have one main screen and I want to import another widget which contains 3 buttons. However, the widget is not showing in the main screen.
Code from main file:
Padding(
padding: EdgeInsets.only(left: 40.0),
child: Row(
children: <Widget>[
Text('Your',
style: TextStyle(color: Colors.white, fontSize: 25.0)),
SizedBox(
width: 10.0,
),
Text('Invoice',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 25.0))
],
)),
SizedBox(height: 40.0),
Container(
height: MediaQuery.of(context).size.height - 185.0,
decoration: BoxDecoration(
color: Colors.white,
borderRadius:
BorderRadius.only(topLeft: Radius.circular(75.0))),
child: ListView(
primary: false,
padding: EdgeInsets.only(left: 25.0, right: 20.0),
children: <Widget>[
Padding(
padding: EdgeInsets.only(top: 45.0),
child: Container(
height: MediaQuery.of(context).size.height - 300.0,
child: ListView(
children: [
buildInvoice(
'Rent one month', 'July rent', '800€')
],
)))
])),
Expanded(
child: ButtonsDetailInvoice(),
),
],
),
);
}
Code from the buttons widget:
return Container(
height: 450.0,
// margin: const EdgeInsets.all(20.0),
child: Row(
children: [
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorBlau)),
onPressed: () {},
color: colorBlau,
textColor: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.file_download),
Text('Download', style: TextStyle(fontSize: 15.0))
],
),
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorMint)),
onPressed: () {},
color: colorMint,
textColor: Colors.white,
child: Row(
children: <Widget>[
Icon(Icons.share),
Text('Share', style: TextStyle(fontSize: 15.0))
],
),
),
RaisedButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(18.0),
side: BorderSide(color: colorRed)),
onPressed: () {},
color: colorRed,
textColor: Colors.white,
child: Text('Report a Problem', style: TextStyle(fontSize: 15.0)),
),
],
),
);
}
}
I would like to see the buttons on the bottom of the main file. I imported them but they are not showing. If someone can help see the error I would really appreciate it.

Use Stack widget in main file.

ListView isn't scrolling in Flutter

ListView is not working here, Firstly instead of padding I used Positioned() but there is a similar issue on github and there I got to know that scrollable widget shouldn't be placed inside Positioned() so i replaced it with Padding(), but got no success.
here is my code
import 'package:flutter/material.dart';
import 'package:cpblog/webview.dart';
import 'package:flutter/rendering.dart';
class DetailsPage extends StatefulWidget {
final heroTag;
final foodName;
final url;
final text;
DetailsPage({this.heroTag, this.foodName,this.url,this.text});
#override
_DetailsPageState createState() => _DetailsPageState();
}
class _DetailsPageState extends State<DetailsPage> {
var selectedCard = 'WEIGHT';
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFF7A9BEE),
appBar: AppBar(
leading: IconButton(
onPressed: () {
Navigator.of(context).pop();
},
icon: Icon(Icons.arrow_back_ios),
color: Colors.white,
),
backgroundColor: Colors.transparent,
elevation: 0.0,
title: Text('Here You Go!!',
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 18.0,
color: Colors.white)),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.more_horiz),
onPressed: () {},
color: Colors.white,
)
],
),
body: ListView(children: [
Stack(children: [
Container(
height: MediaQuery.of(context).size.height - 82.0,
width: MediaQuery.of(context).size.width,
color: Colors.transparent),
Padding(
padding: const EdgeInsets.only(top: 75.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(45.0),
topRight: Radius.circular(45.0),
),
color: Colors.white),
height: MediaQuery.of(context).size.height - 100.0,
width: MediaQuery.of(context).size.width),
),
Padding(
padding: EdgeInsets.only(top: 30.0,
left: (MediaQuery.of(context).size.width / 2) - 100.0,),
child: Hero(
tag: widget.heroTag,
child: Container(
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
image: NetworkImage(widget.heroTag),
fit: BoxFit.cover)),
height: 200.0,
width: 200.0)),
),
Padding(
padding: const EdgeInsets.only(top:250.0,right:25.0,left: 25.0),
child: ListView(
shrinkWrap: true,
children: <Widget>[
Text(widget.foodName,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 22.0,
fontWeight: FontWeight.bold)),
SizedBox(height: 20.0),
Text(widget.text,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 20.0,
)),
SizedBox(height: 20.0),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
width: 125.0,
height: 40.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(17.0),
color: Color(0xFF7A9BEE)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => WebView(widget.url, widget.foodName)));
},
child:Text('View More',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat',
fontSize: 15.0)),
)
],
),
)
],
),
SizedBox(height: 20.0),
Container(
height: 150.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
_buildInfoCard('WEIGHT', '300', 'G'),
SizedBox(width: 10.0),
_buildInfoCard('CALORIES', '267', 'CAL'),
SizedBox(width: 10.0),
_buildInfoCard('VITAMINS', 'A, B6', 'VIT'),
SizedBox(width: 10.0),
_buildInfoCard('AVAIL', 'NO', 'AV')
],
)
),
SizedBox(height: 20.0),
Padding(
padding: EdgeInsets.only(bottom:5.0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), topRight: Radius.circular(10.0), bottomLeft: Radius.circular(25.0), bottomRight: Radius.circular(25.0)),
color: Colors.black
),
height: 50.0,
child:
InkWell(
onTap: () {
Navigator.pop(context);
},
child: Center(
child: Text(
'Back',
style: TextStyle(
color: Colors.white,
fontFamily: 'Montserrat'
)
),
),
)
),
)
],
),
)
])
]));
}
Widget _buildInfoCard(String cardTitle, String info, String unit) {
return InkWell(
onTap: () {
selectCard(cardTitle);
},
child: AnimatedContainer(
duration: Duration(milliseconds: 500),
curve: Curves.easeIn,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10.0),
color: cardTitle == selectedCard ? Color(0xFF7A9BEE) : Colors.white,
border: Border.all(
color: cardTitle == selectedCard ?
Colors.transparent :
Colors.grey.withOpacity(0.3),
style: BorderStyle.solid,
width: 0.75
),
),
height: 100.0,
width: 100.0,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(top: 8.0, left: 15.0),
child: Text(cardTitle,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color:
cardTitle == selectedCard ? Colors.white : Colors.grey.withOpacity(0.7),
)),
),
Padding(
padding: const EdgeInsets.only(left: 15.0, bottom: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(info,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 14.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
fontWeight: FontWeight.bold)),
Text(unit,
style: TextStyle(
fontFamily: 'Montserrat',
fontSize: 12.0,
color: cardTitle == selectedCard
? Colors.white
: Colors.black,
))
],
),
)
]
)
)
);
}
selectCard(cardTitle) {
setState(() {
selectedCard = cardTitle;
});
}
}
I tried physics, listView.builder(),but everytime I get the same result.
Thank you in advance!!!!

Surround you ListView with Expanded widget.
You can't have a scrollable widget inside another scrollable widget without setting a proper height for the inner one. Or use ConstrainedBox

How to layout a cell in flutter with flexible and expandable widgets

I'm trying to layout a cell in flutter and can't space them without a lot of hardcoded padding. The below image is how the layout is, and how I want it.
Using expandable or flexible layouts in cells, I keep getting blank screens with no cells. They seem to work well on non-scrollable layouts.
Current
Want
#override
Widget build(BuildContext context) {
Constants constants = Constants.of(context);
return Container(
constraints: BoxConstraints.tightFor(height: constants.d200),
margin: EdgeInsets.all(10.0),
child: Card(
color: constants.white,
child: Column(
children: <Widget>[
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
color: constants.white,
child: Text(product.name,
style: TextStyle(
fontWeight: FontWeight.normal,
color: constants.orange)),
),
SizedBox(
height: constants.d10,
),
Container(
color: constants.white,
child: Text(product.ean,
style: TextStyle(
fontWeight: FontWeight.bold, color: constants.black)),
),
Container(
color: constants.white,
child: Icon(
Icons.ac_unit,
size: 10,
color: constants.orange,
),
),
],
),
],
),
),
);
}

One way of doing it.
e.g Code:
#override
Widget build(BuildContext context) {
// Constants constants = Constants.of(context);
return Scaffold(
appBar: AppBar(),
body: Center(
child: SizedBox(
width: 250.0,
child: Card(
color: Colors.white,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
child: RaisedButton(
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
onPressed: null,
disabledColor: Colors.white,
child: Text('20 EUR',
style: TextStyle(
fontWeight: FontWeight.normal,
color: Colors.black)),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
disabledColor: Colors.white,
child: Text('75546DRE4263',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.orange,
)),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: <Widget>[
Expanded(
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
disabledColor: Colors.white,
child: Icon(
Icons.ac_unit,
size: 10,
color: Colors.orange,
),
),
),
SizedBox(
width: 5.0,
),
Expanded(
child: RaisedButton(
onPressed: null,
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
disabledColor: Colors.white,
shape: RoundedRectangleBorder(
side: BorderSide(color: Colors.black)),
child: Text('Hint',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
),
),
],
),
),
],
),
),
),
),
);
}
Output: