ripple effect in this container widget is not working - flutter

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,
),
),
),
),
),
),
),

Related

How to put ripple effect on all elements in 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,
),
),
),
),
),
)

Stack item are not positioned when the screen size changes Flutter

1-I am making a simple app where I am creating Profile section Where there is Stack at the top with two widgets
but the problem is when ever I test the app on different screen sizes the Stack item widgets are not at same position even i tried with MediaQuery
2-And the Second issue is I want the Circle Avatar to be place Half inside the Container And Half Out-side the Container.
Here is my Profile.dart class
class SettingsScreen extends StatelessWidget {
const SettingsScreen({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Stack(
children: <Widget>[
Container(
// height: mediaQueryData.size.height * 0.4,
height: 300,
width: double.infinity,
decoration: const BoxDecoration(
gradient: LinearGradient(colors: [
Colors.black,
Color.fromRGBO(255, 243, 18, 3),
], begin: Alignment.topLeft, end: Alignment.bottomRight),
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(50),
bottomRight: Radius.circular(50))),
),
const Padding(
padding: EdgeInsets.only(top: 240, left: 140),
child: CircleAvatar(
backgroundColor: Color.fromARGB(183, 40, 46, 3),
radius: 50,
child: Text(
"M-E",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 32),
),
),
),
Positioned(
top: 110,
left: 40,
child: Text(
"مثابة ايلاف",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 70),
),
),
//),
],
),
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: ListTile(
trailing: const Icon(
Icons.cast_for_education,
color: Colors.black,
),
title: const Text(
"Subjects (مضامین)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.contacts,
color: Colors.black,
),
title: const Text(
"Contact (رابطہ )",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.settings,
color: Colors.black,
),
title: const Text(
"Setting (ترتیبات)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
const Divider(
color: Colors.black,
thickness: 0.5,
),
Padding(
padding: const EdgeInsets.only(top: 2),
child: ListTile(
trailing: const Icon(
Icons.logout,
color: Colors.black,
),
title: const Text(
"Logout (لاگ آوٹ)",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 18),
),
onTap: () {},
),
),
],
),
],
),
));
}
}
Here is the const result I want when the app run on different devices
Here is the result I don't want to be happens whenever the device size changes

Use this structure.
Positioned(
top: 110,
left: 1,
right:1
child: Text(
"مثابة ايلاف",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 70),
),
),

Why it is not changing the heigth and width of the button

InkWell(
borderRadius: BorderRadius.all(Radius.circular(5)),
onTap: () {},
child: SizedBox(
height: 25,
width: screenWidth *65,
child: Container(
color: Colors.blueAccent,
child: Text(
'Confirm',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
),
),
),

Is this what you are looking for?
Container(
padding: EdgeInsets.all(6),
width: double.infinity,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5))
),
color: Colors.blueAccent,
onPressed: () => print('pressed'),
child: Text('Confirm',
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500
),
)
),
),

Remove SizedBox widget as it not of any issue in your current widget tree anyway as you are using container already
and use those height and width parameter inside container widget
try this
InkWell(
borderRadius: BorderRadius.all(Radius.circular(5)),
onTap: () {},
child: Container(
height: 25,
width: screenWidth *65,
color: Colors.blueAccent,
child: Text(
'Confirm',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 15,
color: Color(0xff000000),
fontWeight: FontWeight.w500),
),
),
),

Flutter - custom toggle buttons selection

I am building a row of toggle buttons (on/off selectors) which is basically a row of containers and each container is a category and is clickable.
Q: How to make it so in a way when one category is selected all the others get deselected?
This is the categories widget I've build:
Widget header(){
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
child: Container(
child: Center(
child: Column(
children: <Widget>[
SizedBox(height: 4.0,),
Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('All',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
],
),
),
SizedBox(height: 6.0,)
],
),
),
),
),
],
);
}`

The best way would be to use ListView.builder to build your items and save the selected indexes but you can also modify your existing code to save selected items in a list and check to see if the item is in the list and if it is then add selection format and refresh the page. You can implement that as shown below,
class MyApp extends StatefulWidget {
#override
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
List<String> selectedCategory = new List<String>();
String all = 'All';
String category1 = 'category 1';
String category2 = 'category 2';
String category3 = 'category 3';
String category4 = 'category 4';
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: Container(
padding: const EdgeInsets.all(20.0),
child: header()
)));
}
Widget header(){
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
padding: EdgeInsets.only(top: 4.0, left: 0.0, right: 0.0, bottom: 6.0),
child: Container(
child: Center(
child: Column(
children: <Widget>[
SizedBox(height: 4.0,),
Container(
margin: EdgeInsets.only(left: 10.0, right: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory.add(all);
selectedCategory.add(category1);
selectedCategory.add(category2);
selectedCategory.add(category3);
selectedCategory.add(category4);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(all) ? Colors.blueAccent[100] : Colors.grey[500],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('All',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category1);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category1) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category2);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category2) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category3);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category3) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
SizedBox(width: 2.0,),
InkWell(
splashColor: Colors.blue[100],
onTap: (){
selectedCategory = new List<String>();
selectedCategory.add(category4);
setState(() {});
},
child: Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: selectedCategory.contains(category4) ? Colors.blue[100] : Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('category 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
),
),
],
),
),
SizedBox(height: 6.0,)
],
),
),
),
),
],
);
}
}
Hope this helps.

Well, this piece of code can be optimized, but so far this worked just fine:
class Header extends StatefulWidget {
#override
_HeaderState createState() => _HeaderState();
}
class _HeaderState extends State<Header> {
List<bool> isSelected;
#override
void initState() {
isSelected = [true, false, false, false, false];
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ToggleButtons(
borderColor: Colors.transparent,
fillColor: Colors.transparent,
borderWidth: null,
selectedBorderColor: Colors.transparent,
selectedColor: Colors.transparent,
splashColor: Colors.transparent,
children: <Widget>[
!isSelected[0] ?
Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
margin: EdgeInsets.only(right: 3.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 1',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 1',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[1] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 2',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 2',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[2] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 3',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 3',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[3] ?
Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 4',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
margin: EdgeInsets.only(right: 3.0),
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 4',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
!isSelected[4] ?
Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.grey[300],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 5',
style: TextStyle(color: Colors.grey[900], fontSize: 10.0, fontWeight: FontWeight.w500),),
)
:Container(
padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 12.0),
decoration: BoxDecoration(
color: Colors.blueAccent[100],
borderRadius: BorderRadius.all(Radius.circular(48.0)),
),
child: Text('cat 5',
style: TextStyle(color: Colors.white, fontSize: 10.0, fontWeight: FontWeight.w700),),
),
],
onPressed: (int index) {
setState(() {
for (int i = 0; i < isSelected.length; i++) {
isSelected[i] = i == index;
}
});
},
isSelected: isSelected,
),
],
);
}
}

My screen is not jumping to the next screen as required

I am using RawMaterialButton and I need to switch screen when the button is pressed, but it is not switching?
Here is my code - first Screen:
Widget _buildListItem(String picture) {
return Row(
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 100.0,
width: 130.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(picture),
fit: BoxFit.cover
),
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), bottomRight: Radius.circular(10.0))),
),
SizedBox(width: 10.0),
Container(
height: 120.0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text('Maple Mustard Tempeh',
style: TextStyle(
fontSize: 15.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold
),
),
SizedBox(height: 5.0),
Text('Marinated kale, onion, tomato and roasted',
style: TextStyle(
fontSize: 11.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
Text('garlic aioli on grilled spelt bread',
style: TextStyle(
fontSize: 11.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
SizedBox(height: 10.0),
Row(
children: <Widget>[
Text('\u20B9 11.25',
style: TextStyle(
fontSize: 20.0,
fontFamily: 'Montserrat',
fontWeight: FontWeight.bold,
color: Colors.grey
),
),
SizedBox(width: 60.0,),
Cbutton(onPressed: ()=> item_details()),
],
),
],
),
),
],
),
],
);
}
RawMaterialButton
return new RawMaterialButton(
fillColor: Colors.green,
splashColor: Colors.greenAccent,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20.0,
vertical: 8.0),
child: Row(
mainAxisSize: MainAxisSize.min,
children: const <Widget>[
Icon(
Icons.add,
color: Colors.white,),
SizedBox(width: 8.0,),
Text("Add", style: TextStyle(
color: Colors.white
),),
],
),
),
onPressed: onPressed,
shape: StadiumBorder(),
);
}
}

If you want to change screens, you can user Navigator.
onPressed: () {
Navigator.push( context, MaterialPageRoute(
builder: (context) => SecondScreen()
));
}