How can I change my standard Switch
to this gradient switch
Also how to increase the size of switch?
Please help.
Code:-
Switch(
activeColor: Colors.lightBlueAccent,
inactiveThumbColor: Colors.grey,
value: _switchValueRead,
onChanged: (value) {
setState(() {
_switchValueRead = value;
});
},
),
You can do it by this from this thread
library custom_switch;
import 'package:flutter/material.dart';
class CustomSwitch extends StatefulWidget {
final bool value;
final ValueChanged<bool> onChanged;
final Color activeColor;
final Color inactiveColor;
final String activeText;
final String inactiveText;
final Color activeTextColor;
final Color inactiveTextColor;
const CustomSwitch(
{Key key,
this.value,
this.onChanged,
this.activeColor,
this.inactiveColor = Colors.grey,
this.activeText = '',
this.inactiveText = '',
this.activeTextColor = Colors.white70,
this.inactiveTextColor = Colors.white70})
: super(key: key);
#override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation _circleAnimation;
AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 60));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.linear));
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return GestureDetector(
onTap: () {
if (_animationController.isCompleted) {
_animationController.reverse();
} else {
_animationController.forward();
}
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
},
child: Container(
width: 70.0,
height: 35.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
// I commented here.
// color: _circleAnimation.value == Alignment.centerLeft
// ? widget.inactiveColor
// : widget.activeColor,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// You can set your own colors in here!
colors: [
Colors.blue,
Colors.red,
],
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 4.0, bottom: 4.0, right: 4.0, left: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_circleAnimation.value == Alignment.centerRight
? Padding(
padding: const EdgeInsets.only(left: 34.0, right: 0),
child: Text(
widget.activeText,
style: TextStyle(
color: widget.activeTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
Align(
alignment: _circleAnimation.value,
child: Container(
width: 25.0,
height: 25.0,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
),
_circleAnimation.value == Alignment.centerLeft
? Padding(
padding: const EdgeInsets.only(left: 0, right: 34.0),
child: Text(
widget.inactiveText,
style: TextStyle(
color: widget.inactiveTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
],
),
),
),
);
},
);
}
}
Check this for gradient
For increasing the size - wrap your Switch into Container (or SizedBox) and set width and height to Container(SizedBox). It should help.
Related
With the following code, I create the structure for the Navigation Bar items on Flutter, and all of it works fine, but I can't make the 'text', 'labels', or 'titles' to be visible right next to the font awesome icons. Some of the parameters, which are the ones commented on, don't work either. Is there any functional way to do so?
Widget build(BuildContext context) {
return Container(
height: 350.0,
child: Column(
children: [
NavBarItem(
active: selected[0],
fontAwesomeIcons: FontAwesomeIcons.user,
text: 'sdfg',
touched: () {
setState(() {
select(0);
});
},
),
NavBarItem(
text: 'dfgdfg',
active: selected[1],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(1);
});
},
),
NavBarItem(
text: 'sdfgsdf',
active: selected[2],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(2);
});
},
),
NavBarItem(
text: 'ertdsf',
active: selected[3],
fontAwesomeIcons: FontAwesomeIcons.user,
touched: () {
setState(() {
select(3);
});
},
),
],
),
);
}
}
class NavBarItem extends StatefulWidget {
final IconData fontAwesomeIcons;
final Function touched;
final bool active;
final color = Colors.white;
final hoverColor = Colors.green;
// final String title;
// final Text title;
NavBarItem(
{
// required this.title,
required this.active,
required this.fontAwesomeIcons,
required this.touched,
required String text
// required String label
});
#override
_NavBarItemState createState() => _NavBarItemState();
}
class _NavBarItemState extends State<NavBarItem> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
widget.touched();
},
splashColor: Colors.white,
hoverColor: Colors.white12,
child: Container(
padding: EdgeInsets.symmetric(vertical: 3.0),
child: Row(
children: [
Container(
height: 60.0,
width: 80.0,
child: Row(
children: [
AnimatedContainer(
duration: Duration(milliseconds: 475),
height: 35.0,
width: 5.0,
decoration: BoxDecoration(
color:
widget.active ? Colors.white : Colors.transparent,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0))),
),
Padding(
padding: EdgeInsets.only(left: 30.0),
child: Icon(
widget.fontAwesomeIcons,
color: widget.active ? Colors.white : Colors.white54,
size: 20.0,
),
),
],
),
)
],
),
),
),
);
}
}
Not sure what exactly you are looking for, but I don't see you adding Text widget in the row. And adding the width to container will hide other widgets.
class NavBarItem extends StatefulWidget {
final IconData fontAwesomeIcons;
final Function touched;
final bool active;
final color = Colors.white;
final hoverColor = Colors.green;
final String text;
NavBarItem(
{
required this.active,
required this.fontAwesomeIcons,
required this.touched,
required this.text
});
#override
_NavBarItemState createState() => _NavBarItemState();
}
class _NavBarItemState extends State<NavBarItem> {
#override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: InkWell(
onTap: () {
widget.touched();
},
splashColor: Colors.white,
hoverColor: Colors.white12,
child: Container(
height: 60,
padding: const EdgeInsets.symmetric(vertical: 3.0),
alignment: Alignment.centerLeft,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
AnimatedContainer(
duration: const Duration(milliseconds: 475),
height: 35.0,
width: 5.0,
decoration: BoxDecoration(
color:
widget.active ? Colors.white : Colors.transparent,
borderRadius: const BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0))),
),
Padding(
padding: const EdgeInsets.only(left: 30.0),
child: Icon(
widget.fontAwesomeIcons,
color: widget.active ? Colors.white : Colors.white54,
size: 20.0,
),
),
const SizedBox(width: 16),
Text(widget.text),
],
),
),
),
);
}
}
How do you achieve the smooth transition when the checkmark is added?
Clicking the element will setState update the pressAttention variable, and therefore add the checkmark widget to the list of children of the row.
For now it just instantly rebuilds the row, and adds the checkmark, but I would really like it to smoothly do as in the GIF.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
widget.amount,
style: const TextStyle(
color: Colors.white, fontWeight: FontWeight.w700),
),
if (pressAttention)
Padding(
padding: const EdgeInsets.only(left: 10),
child: Container(
width: 23,
height: 23,
decoration: BoxDecoration(
color: Theme.of(context).highlightColor,
shape: BoxShape.circle,
),
child: Padding(
padding: const EdgeInsets.all(4),
child: SvgPicture.asset(
MyIcons.checkmarkThick,
),
),
),
)
],
),
try this:
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
#override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
late Animation<double> _animation;
late Animation<double> _opacityAnimation;
late Animation _colorAnimation;
late AnimationController _controller;
var pressAttention = false;
#override
void initState() {
super.initState();
_controller =
AnimationController(duration: Duration(milliseconds: 500), vsync: this)
..addListener(() => setState(() {}));
_animation = Tween(begin: 15.0, end: 0.0).animate(_controller);
_opacityAnimation = Tween(begin: 0.0, end: 1.0).animate(_controller);
_colorAnimation =
ColorTween(begin: Colors.grey, end: Colors.purple).animate(_controller);
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Center(
child: Container(
child: InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
if (pressAttention) {
_controller.forward();
} else {
_controller.reverse();
}
setState(() {
pressAttention = !pressAttention;
});
},
child: AnimatedBuilder(
animation: _controller,
builder: (context, child) {
return Container(
width: 100,
decoration: BoxDecoration(
border: Border.all(color: _colorAnimation.value),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Transform.translate(
offset: Offset(_animation.value, 0),
child: Text(
'1000',
style: const TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700),
),
),
Opacity(
opacity: _opacityAnimation.value,
child: Padding(
padding: EdgeInsets.only(left: 10),
child: Container(
decoration: BoxDecoration(
color: Theme.of(context).highlightColor,
shape: BoxShape.circle,
),
child: const Padding(
padding: EdgeInsets.all(4),
child: Icon(
Icons.check,
size: 13,
),
),
),
),
)
],
),
);
}),
),
),
),
),
);
}
}
You can achieve this with a combination of Animated Widgets. Set their behaviours and durations and you should be good to go.
im trying to make flutter cupertino active color as gradient color inactive color should be default color`
final Color activeColor = AppColors.grey;
final Color iactive = AppColors.red;
ShaderMask(
child: CupertinoSwitch(
trackColor: AppColors.grey ,
activeColor: iactive,
value: userstatus,
onChanged: (value){
setState(() {
userstatus = value;
dealerstatus = !value;
},
);
}
),
shaderCallback: (test) {
return LinearGradient(
colors: value
?[iactive ,Colors.yellow
]:[activeColor,activeColor],
).createShader(test);
},)
class CustomSwitch extends StatefulWidget {
final bool value;
final ValueChanged<bool> onChanged;
final Color activeColor;
final Color inactiveColor;
const CustomSwitch({
Key key,
this.value,
this.onChanged,
this.activeColor,
this.inactiveColor = Colors.grey,
}) : super(key: key);
#override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation _circleAnimation;
AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController = AnimationController(
vsync: this, duration: const Duration(milliseconds: 120));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.bounceInOut));
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return InkWell(
onTap: () {
if (_animationController.isCompleted) {
_animationController.reverse();
} else {
_animationController.forward();
}
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
},
child: Ink(
width: 70.0,
height: 34.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
color: _circleAnimation.value == Alignment.centerLeft
? Colors.grey
: widget.activeColor,
gradient: _circleAnimation.value == Alignment.centerLeft
? null
: orangeLinaer(-1.0, 0.0, 1, 0.0)),
child: Padding(
padding: EdgeInsets.only(
top: 4.0,
bottom: 4.0,
right: 4.0,
left: 4.0,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_circleAnimation.value == Alignment.centerRight
? const Spacer()
: const Center(),
Align(
alignment: _circleAnimation.value,
child: Ink(
width: 26.0,
height: 26.0,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.white,
),
),
),
_circleAnimation.value == Alignment.centerLeft
? const Spacer()
: const Center(),
],
),
),
),
);
},
);
}
}
LinearGradient orangeLinaer(double x1, double y1, double x2, double y2) {
return LinearGradient(
begin: Alignment(x1, y1),
end: Alignment(x2, y2),
colors: const [Color(0xffF8A170), Color(0xffFFCD61)],
);
}
Is there any way to generate this switch with the Switch widget?
Thank you
You can use custom_switch package. I changed it for linearGradient.
library custom_switch;
import 'package:flutter/material.dart';
class CustomSwitch extends StatefulWidget {
final bool value;
final ValueChanged<bool> onChanged;
final Color activeColor;
final Color inactiveColor;
final String activeText;
final String inactiveText;
final Color activeTextColor;
final Color inactiveTextColor;
const CustomSwitch(
{Key key,
this.value,
this.onChanged,
this.activeColor,
this.inactiveColor = Colors.grey,
this.activeText = '',
this.inactiveText = '',
this.activeTextColor = Colors.white70,
this.inactiveTextColor = Colors.white70})
: super(key: key);
#override
_CustomSwitchState createState() => _CustomSwitchState();
}
class _CustomSwitchState extends State<CustomSwitch>
with SingleTickerProviderStateMixin {
Animation _circleAnimation;
AnimationController _animationController;
#override
void initState() {
super.initState();
_animationController =
AnimationController(vsync: this, duration: Duration(milliseconds: 60));
_circleAnimation = AlignmentTween(
begin: widget.value ? Alignment.centerRight : Alignment.centerLeft,
end: widget.value ? Alignment.centerLeft : Alignment.centerRight)
.animate(CurvedAnimation(
parent: _animationController, curve: Curves.linear));
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: _animationController,
builder: (context, child) {
return GestureDetector(
onTap: () {
if (_animationController.isCompleted) {
_animationController.reverse();
} else {
_animationController.forward();
}
widget.value == false
? widget.onChanged(true)
: widget.onChanged(false);
},
child: Container(
width: 70.0,
height: 35.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(20.0),
// I commented here.
// color: _circleAnimation.value == Alignment.centerLeft
// ? widget.inactiveColor
// : widget.activeColor,
gradient: LinearGradient(
begin: Alignment.topRight,
end: Alignment.bottomLeft,
// You can set your own colors in here!
colors: [
Colors.blue,
Colors.red,
],
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 4.0, bottom: 4.0, right: 4.0, left: 4.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
_circleAnimation.value == Alignment.centerRight
? Padding(
padding: const EdgeInsets.only(left: 34.0, right: 0),
child: Text(
widget.activeText,
style: TextStyle(
color: widget.activeTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
Align(
alignment: _circleAnimation.value,
child: Container(
width: 25.0,
height: 25.0,
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
),
),
_circleAnimation.value == Alignment.centerLeft
? Padding(
padding: const EdgeInsets.only(left: 0, right: 34.0),
child: Text(
widget.inactiveText,
style: TextStyle(
color: widget.inactiveTextColor,
fontWeight: FontWeight.w900,
fontSize: 16.0),
),
)
: Container(),
],
),
),
),
);
},
);
}
}
Here is main.dart:
import 'package:custom_switch/custom_switch.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.deepOrange
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatefulWidget {
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
bool status = false;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Custom Switch Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CustomSwitch(
activeColor: Colors.pinkAccent,
value: status,
onChanged: (value) {
print("VALUE : $value");
setState(() {
status = value;
});
},
),
SizedBox(height: 12.0,),
Text('Value : $status', style: TextStyle(
color: Colors.black,
fontSize: 20.0
),)
],
),
),
);
}
}
The flutter code below represents a list of MealsListView objects, which represents a series of buttons that are displayed to the user, what I want to do is add an onPressed method which, when the user clicks on the specific button, passes the button title to the _marcaturautente(titlename) function. How can I go about doing this?
Flutter dart code:
//Funzione che viene eseguita quando l'utente clicca su un pulsante per effettuare la marcatura
Future<void> _marcaturautente(String tipologiaMarcatura) async {
print("Sono dentro la funzione che esegue la marcatura");
//Instanzio l'oggetto che si occupa di recuperare i dati per la marcatura
var location = new Location();
//Recupero i valori per istanziare l'oggetto dell'utente
var email = await Storage.leggi("Email");
var password = await Storage.leggi("Password");
var idutente = int.parse(await Storage.leggi("IdUtente"));
location.onLocationChanged().listen((LocationData currentLocation) {
double longitudine = currentLocation.longitude;
double latitudine = currentLocation.latitude;
//Genero l'istanza dell'utente
var user = new Utente.init(idutente, email, password);
//Genero l'istanza che si occuperà di effettuare la marcatura
var marcatura = new Marcatura(user, longitudine, latitudine);
//Verifico la tipologia della marcatura
if (tipologiaMarcatura == "Ingresso") {
marcatura.ingresso();
} else if (tipologiaMarcatura == "Uscita") {
marcatura.uscita();
} else if (tipologiaMarcatura == "Arrivo") {
marcatura.arrivo();
} else if (tipologiaMarcatura == "Partenza") {
marcatura.partenza();
}
});
}
class MealsListView extends StatefulWidget {
const MealsListView(
{Key key, this.mainScreenAnimationController, this.mainScreenAnimation})
: super(key: key);
final AnimationController mainScreenAnimationController;
final Animation<dynamic> mainScreenAnimation;
#override
_MealsListViewState createState() => _MealsListViewState();
}
class _MealsListViewState extends State<MealsListView>
with TickerProviderStateMixin {
AnimationController animationController;
List<MealsListData> mealsListData = MealsListData.tabIconsList;
#override
void initState() {
animationController = AnimationController(
duration: const Duration(milliseconds: 2000), vsync: this);
super.initState();
}
Future<bool> getData() async {
await Future<dynamic>.delayed(const Duration(milliseconds: 50));
return true;
}
#override
void dispose() {
animationController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: widget.mainScreenAnimationController,
builder: (BuildContext context, Widget child) {
return FadeTransition(
opacity: widget.mainScreenAnimation,
child: Transform(
transform: Matrix4.translationValues(
0.0, 30 * (1.0 - widget.mainScreenAnimation.value), 0.0),
child: Container(
height: 216,
width: double.infinity,
child: ListView.builder(
padding: const EdgeInsets.only(
top: 0, bottom: 0, right: 16, left: 16),
itemCount: mealsListData.length,
scrollDirection: Axis.horizontal,
itemBuilder: (BuildContext context, int index) {
final int count =
mealsListData.length > 10 ? 10 : mealsListData.length;
final Animation<double> animation =
Tween<double>(begin: 0.0, end: 1.0).animate(
CurvedAnimation(
parent: animationController,
curve: Interval((1 / count) * index, 1.0,
curve: Curves.fastOutSlowIn)));
animationController.forward();
return MealsView(
onTap: (index) {},
mealsListData: mealsListData[index],
animation: animation,
animationController: animationController,
tipologiaMarcatura: mealsListData[index].titleTxt);
},
),
),
),
);
},
);
}
}
typedef CustomCallback = void Function(int);
class MealsView extends StatelessWidget {
const MealsView(
{Key key,
this.mealsListData,
this.animationController,
this.animation,
this.index,
this.onTap,
this.tipologiaMarcatura})
: super(key: key);
//Stringa che viene inizializzata con la tipologia della marcatura
final String tipologiaMarcatura;
final MealsListData mealsListData;
final AnimationController animationController;
final Animation<dynamic> animation;
final int index;
final CustomCallback onTap;
//Recupero dei dati che vanno inseriti all'interno dell widget
Widget getData() {
return FadeTransition(
opacity: animation,
//wrap your Stack widget inside InkWell
child: Transform(
transform:
Matrix4.translationValues(100 * (1.0 - animation.value), 0.0, 0.0),
child: SizedBox(
width: 130,
child: Stack(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(
top: 32, left: 8, right: 8, bottom: 16),
child: Container(
decoration: BoxDecoration(
boxShadow: <BoxShadow>[
BoxShadow(
color:
HexColor(mealsListData.endColor).withOpacity(0.6),
offset: const Offset(1.1, 4.0),
blurRadius: 8.0),
],
gradient: LinearGradient(
colors: <HexColor>[
HexColor(mealsListData.startColor),
HexColor(mealsListData.endColor),
],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
borderRadius: const BorderRadius.only(
bottomRight: Radius.circular(8.0),
bottomLeft: Radius.circular(8.0),
topLeft: Radius.circular(8.0),
topRight: Radius.circular(54.0),
),
),
child: Padding(
padding: const EdgeInsets.only(
top: 54, left: 16, right: 16, bottom: 8),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
mealsListData.titleTxt,
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: TemaApp.fontName,
fontWeight: FontWeight.bold,
fontSize: 16,
letterSpacing: 0.2,
color: TemaApp.white,
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(top: 8, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
mealsListData.meals.join('\n'),
style: TextStyle(
fontFamily: TemaApp.fontName,
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 0.2,
color: TemaApp.white,
),
),
],
),
),
),
mealsListData.kacl != 0
? Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.end,
children: <Widget>[
Text(
mealsListData.kacl.toString(),
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: TemaApp.fontName,
fontWeight: FontWeight.w500,
fontSize: 24,
letterSpacing: 0.2,
color: TemaApp.white,
),
),
Padding(
padding: const EdgeInsets.only(
left: 4, bottom: 3),
child: Text(
'',
style: TextStyle(
fontFamily: TemaApp.fontName,
fontWeight: FontWeight.w500,
fontSize: 10,
letterSpacing: 0.2,
color: TemaApp.white,
),
),
),
],
)
: Container(
decoration: BoxDecoration(
color: TemaApp.nearlyWhite,
shape: BoxShape.circle,
boxShadow: <BoxShadow>[
BoxShadow(
color: TemaApp.nearlyBlack
.withOpacity(0.4),
offset: Offset(8.0, 8.0),
blurRadius: 8.0),
],
),
child: Padding(
padding: const EdgeInsets.all(6.0),
child: Icon(
Icons.add,
color: HexColor(mealsListData.endColor),
size: 24,
),
),
),
],
),
),
),
),
Positioned(
top: 0,
left: 0,
child: Container(
width: 84,
height: 84,
decoration: BoxDecoration(
color: TemaApp.nearlyWhite.withOpacity(0.2),
shape: BoxShape.circle,
),
),
),
Positioned(
top: 0,
left: 8,
child: SizedBox(
width: 80,
height: 80,
child: Image.asset(mealsListData.imagePath),
),
)
],
),
),
),
);
}
#override
Widget build(BuildContext context) {
return AnimatedBuilder(
animation: animationController,
builder: (BuildContext context, Widget child) {
//InWell è un rettangolo che permett edi rispondere al touch
return InkWell(
onTap: () {
onTap(index);
print("Eseguito tap su index: " + index.toString() + "");
},
//Viene generato il child con il container dei dati
child: Container(
child: getData(),
),
);
});
}
}
Update*
typedef CustomCallback = void Function(int);
//Custom Callback function
class MealsView extends StatelessWidget {
const MealsView(
{Key key,
this.mealsListData,
this.animationController,
this.animation,
this.index,
this.onTap;
this.tipologiaMarcatura})
: super(key: key);
//Stringa che viene inizializzata con la tipologia della marcatura
final String tipologiaMarcatura;
final MealsListData mealsListData;
final AnimationController animationController;
final Animation<dynamic> animation;
final int index;
final CustomCallback onTap;
//wrap your Stack widget inside InkWell
InkWell(
onTap:(){
onTap(index);
//Todo
},
//Your Stack and other code goes here...
)
}
and use it in
return MealsView(onTap:(ii){
},
mealsListData: mealsListData[index],
animation: animation,
animationController: animationController,
tipologiaMarcatura: mealsListData[index].titleTxt
);