I've been trying so hard to build page view system for quotes app. I want the page to flow full screen from top to bottom and bottom to top scrollable/swipe able to navigate between different quotes each time
like this. The scroll will bring new page each time its not casual scroll. I haven't found any guide regarding this on internet so far.
I don't know about how to build it, nothing is popping in my mind for days now. I've tried pageview with gesture detector for swiping up and down, it doesn't works as desired and appbar is static too and the bottom containers as well I don't want this. What I want is the page/screen to flow under the appbar or even a button on top right corner and under 2 buttons on the bottom.
Create a column of Containers where each Container's height and width equals the height and width of the screen. You can do that by using:
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
Also, make sure to wrap your code with a SingleChildScrollView widget to scroll vertically.
Here's the code:
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: SingleChildScrollView(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(child: Text('Quote number one')),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(
icon: Icon(Icons.favorite), onPressed: () {})
],
),
)
],
),
),
Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
children: [
Text('Quote number two'),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(icon: Icon(Icons.share), onPressed: () {}),
IconButton(icon: Icon(Icons.favorite), onPressed: () {})
],
)
],
),
)
],
),
),
),
);
}
}
You can use PageView to get this type of view
Drive Video link
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
PageController pageController;
PageView pageView;
List<String> quotes = [
'#Quote 1\n\n“I\'m selfish, impatient and a little insecure. I make mistakes, I am out of control and at times hard to handle. But if you can\'t handle me at my worst, then you sure as hell don\'t deserve me at my best.” ',
'#Qoute 2\n\nSo many books, so little time.',
'#Quote 3\n\n A room without books is like a body without a soul'
];
#override
void initState() {
super.initState();
pageController = PageController();
final _quotes = List.generate(quotes.length, (index) => quoteWidget(index));
pageView = PageView(
children: _quotes,
controller: pageController,
scrollDirection: Axis.vertical,
);
}
Widget quoteWidget(int index) {
return Scaffold(
backgroundColor: Colors.black,
body: Column(
children: [
Expanded(
flex: 3,
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Center(
child: Text(
quotes[index],
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
color: Colors.white,
),
),
),
),
),
Expanded(
flex: 1,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: [
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.share),
),
const SizedBox(width: 20),
FloatingActionButton(
onPressed: () {},
child: Icon(Icons.favorite_border),
),
],
),
),
Expanded(child: Container())
],
),
);
}
#override
void dispose() {
pageController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
brightness: Brightness.dark,
title: Text(widget.title),
),
body: SafeArea(
child: Stack(
alignment: Alignment.bottomCenter,
children: [
pageView,
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 10),
child: Row(
children: [
RaisedButton.icon(
icon: Icon(Icons.menu_book),
label: Text('General'),
onPressed: () {},
),
const Spacer(),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.color_lens),
),
Container(
width: 50,
height: 50,
margin: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(5),
),
child: Icon(Icons.person),
),
],
),
)
],
),
),
);
}
}
Related
I'm trying to create elevated buttons that have equations on them. Here's the stripped down code that I have thus far:
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(0),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(1)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(
r"""$$0$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
Flexible(
fit: FlexFit.tight,
flex: 10,
child: ElevatedButton(
style: getOptionButtonStyle(1),
onPressed: () =>
{debugPrint("${context.size}"), updateSelection(3)},
child: TeXView(
renderingEngine: TeXViewRenderingEngine.katex(),
child: TeXViewDocument(r"""$$1$$""",
style: TeXViewStyle(
textAlign: TeXViewTextAlign.center,
fontStyle: TeXViewFontStyle(
fontSize: 10, sizeUnit: TeXViewSizeUnit.pt),
),
),
),
),
),
const Padding(padding: EdgeInsets.all(10)),
],
),
Unfortunately, this only displays the second button properly, the first has some squiggles that are almost invisible on the right:
I've tried changing the rendering engine to mathjax, added and removed padding and margins in the style, but no luck.
Any idea what is going on, and how to fix it?
Thanks!
Update: it turns out that this behaviour is when I run it on chrome (web). Running on my phone renders perfectly! So: what settings could be affecting this?
Prefrable and less complex
=> By Using GetX Package
1st method
Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: Get.width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: Get.width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: Get.width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
));
=> By using Media Query
second method
class Test1 extends StatelessWidget {
var size,height,width;
Test1({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
size = MediaQuery.of(context).size;
height = size.height;
width = size.width;
return Scaffold(
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: width,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
width: width*0.45,
height: 50,
child: ElevatedButton(onPressed: () {}, child: Text("1"))),
Container(
height: 50,
width: width*0.45,
child: ElevatedButton(onPressed: () {}, child: Text("2"))),
],
),
),
),
));
}
}
here is my app
as you can see working well, I installed this on my phone, and it works fine too.
and I send this to my friend, and his phone showing like this
mine and his phone is same phone, literally same phone, but in his and any others phone is showing this overflow, mine and this emulator have no problem, how do i fix overflow problem
class Homescreen extends StatelessWidget {
const Homescreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
appBar: AppBar(
title: const Text("Pluto Guess Game"),
backgroundColor: Colors.white60,
),
body: Container(
color: Colors.white,
child: SafeArea(
child: ListView(
children: [
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: mbappe
)
PlayerWidget(
player: ramos
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
PlayerWidget(
player: messi
),
PlayerWidget(
player: neymar
)
],
),
),
Card(
child: IconButton(
icon: const Icon(Icons.gesture),
iconSize: 50,
color: Colors.black,
splashColor: Colors.orange,
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (nav) {
return const Asking();
},
),
);
},
),
),
],
),
),
),
),
);
}
}
and also I'm new at flutter, I know I'm doing lot of mistake in this code please suggest that also
->Use This Code
Widget build(BuildContext context) {
double h = MediaQuery.of(context).size.height;
double w = MediaQuery.of(context).size.width;
return Scaffold(
appBar: getAppBar(context, "Back", "", []),
body: SafeArea(
top: true,
bottom: true,
child: Column(
children: [
Expanded(
child: ListView.builder(
shrinkWrap: true,
physics: BouncingScrollPhysics(),
itemCount: 15,
itemBuilder: (context,v){
return
Container(
padding: EdgeInsets.only(left: 15.0,right: 15.0),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Container(
height: h*0.2,
width: w*0.4,
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(25.0)
),
),
Container(
height: h*0.2,
width: w*0.4,
decoration: BoxDecoration(
color: Colors.black38,
borderRadius: BorderRadius.circular(25.0)
),
),
],
),
SizedBox(height: 15.0,),
Divider(
color: Colors.black,
),
SizedBox(height: 15.0,),
],
),
);
}),
)
],
),
),
);
}
Without your code I can't make corrections to the current code. but if you need responsive UI that work regardless of screen size, I suggest you use Rows, Columns with Expanded Widget, as necessary.
for example if you need to have 2 Items inside a Row where each occupies same space you can use,
Row (
children: [
Expanded (
flex:1
child: YourWidget()
),
Expanded (
flex:1
child: YourWidget()
)
]
)
Remember to remove hardcoded size properties along the main axis of your Colum or Row.
Same goes for Columns.
If you need each to have varied sizes, you can use flex property of the Expanded Widget. for example, one items has 1/3 of width and other has 2/3 you can put 1 and 2 as flex values.
more explanation from flutter team: Expanded
I want that Cancellation charges and the bottom button remains fixed on screen, while the Choose Seat(s) and passengers should be scrollable. But, whenever I am trying to insert any widget after singlechildscrollview, it is not appearing at the bottom.
As, my column has 3 widgets, a row, singlechildscrollview and button, so my button and top row should remain there and remaining seats and passengers should be scrollable, but I am not able to see the bottom button, while my row working fine, remaining there.
Code -
showCancellationCharges(BuildContext? context) {
final DateTime currentDate = DateTime.now();
if (ticketData!.data!.booking!.boarding!.eta! >
currentDate.millisecondsSinceEpoch)
showModalBottomSheet(
backgroundColor: Colors.white,
context: context!,
builder: (context) => Wrap(
children: [
StatefulBuilder(
builder: (context, stateSetter) => Padding(
padding: MediaQuery.of(context).viewInsets,
child: Container(
//height: MediaQuery.of(context).size.height*0.7,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.only(top: 5.0, bottom: 5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Cancellation Charges',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
)
),
IconButton(
icon: Icon(
Icons.close,
color: colorPrimary,
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
Container(
height: MediaQuery.of(context).size.height*0.5,
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Seat(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.seats!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.seats![index].selected,
checkBox: (v) => stateSetter(() {
print('seat at index $index $v');
if (v)
totalSeatToCancel++;
else
totalSeatToCancel--;
ticketData!.data!.booking!.seats![index]
.selected = v;
}),
// checkBoxState: data[index.],
imagePath:
'assets/icons/ticket_seat_icon.svg',
title: ticketData!
.data!.booking!.seats![index].code,
)),
),
// CancellationSeatItems(
// data: ticketData.data.booking.seats,
// ),
Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: Text(
'Choose Passenger(s)',
style: TextStyle(color: popUpLightTextColor),
),
),
Column(
children: List.generate(
ticketData!.data!.booking!.passengers!.length,
(index) => CancellationItem(
checkBoxState: ticketData!.data!.booking!
.passengers![index].selected,
checkBox: (v) => stateSetter(() {
if (v)
totalPassengerToCancel++;
else
totalPassengerToCancel--;
print('passenger at index $index $v');
ticketData!.data!.booking!
.passengers![index].selected = v;
}),
imagePath: (ticketData!.data!.booking!
.passengers![index].gender ==
'MALE')
? 'assets/icons/male_icon.svg'
: 'assets/icons/female_icon.svg',
title: ticketData!.data!.booking!
.passengers![index].name,
)),
),
],
),
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Container(
child: ValueListenableBuilder(
valueListenable: isCalculating,
builder: (BuildContext context, bool val, Widget? child) {
return FlatButton(
height: 44,
minWidth: MediaQuery.of(context).size.width,
color: val ? Colors.grey : colorPrimary,
onPressed: () => calculateItem(),
child: Text(
val ? 'Calculating...' : 'Calculate',
style: TextStyle(
color: Colors.white,
fontSize: 16
),
),
);
},
),
),
),
// CancellationPassengerItems(
// data: ticketData.data.booking.passengers,
// ),
],
),
),
),
),
),
],
));
else
_snackbarService.showSnackbar(
message: 'Sorry, ticket can not be cancelled');
}
Actually I solved the problem. I just used isScrollControlled: true, parameter for showModalBottomSheet and it's done.
you may put the listview inside a container with a height
I'm trying to implement a DropDownButton where the list of items will be displayed from its start.
Meaning, I want the items list to be opened and displayed as if the items list "completes" the DropDownButton - right after the green underline and regardless to the current value (see current behavior below).
I tried looking up online some information of how to achieve it but it yielded nothing. Also, I tried wrapping the DropDownButton with widgets to set the alignment of the drop of items and unfortunately I managed nothing.
What am I missing?
How can I set The DropDownButton's list to be opened so that the items will be aligned from its start?
here is my code:
final List<String> categories = ['', 'Cakes', 'Chocolate', 'Balloons', 'Flowers', 'Greeting Cards','Gift Cards', 'Other'];
String _currCategory = categories[0];
#override
Widget build(BuildContext context){
return Material(
child: Scaffold(
resizeToAvoidBottomInset: true,
resizeToAvoidBottomPadding: false,
backgroundColor: Colors.transparent,
key: _scaffoldKeyMainScreen,
appBar: AppBar(
centerTitle: true,
elevation: 0.0,
backgroundColor: Colors.lightGreen[800],
actions: <Widget>[
///Checkout - cart
IconButton(
icon: Icon(Icons.shopping_cart_outlined),
onPressed: () {}
),
/// WishList
IconButton(
icon: Icon(Icons.favorite),
onPressed: () => {}
],
leading: Icon(Icons.logout),
title: Text('My app'),
),
body: Stack(
alignment: Alignment.center,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width * 0.35,
color: Colors.lightGreen[800],
),
),
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(20.0),
topRight: Radius.circular(20.0),
),
child: Container(
color: Colors.white,
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Flexible(
child: Align(
alignment: Alignment.center,
child: Container(
color: Colors.transparent,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(11.0),
child: Center(
child: Text(' Sort by: ',
style: TextStyle(
color: Colors.black,
),
),
),
),
Container(
color: Colors.transparent,
child: Theme(
data: Theme.of(context).copyWith(
canvasColor: Colors.transparent,
buttonTheme: ButtonTheme.of(context).copyWith(
alignedDropdown: true,
)
),
child: DropdownButton<String>(
dropdownColor: Colors.white,
underline: Container(
height: 2,
color: Colors.lightGreen[300],
),
icon: Icon(Icons.keyboard_arrow_down_outlined,
color: Colors.lightGreen[200],
),
elevation: 8,
value: _currCategory,
items: categories
.map<DropdownMenuItem<String>>((e) => DropdownMenuItem(
child: Text(e, style: TextStyle(color: Colors.lightGreen[300]),),
value: e,
)
).toList(),
onChanged: (String value) {
setState(() {
_currCategory = value;
});
},
)
),
),
///in my app I have a GridView that is built from items loaded from Firebase
///but I think it has nothing to do with the current problem so I placed a symbolic text
Center(child: Text(_currCategory)),
],
),
),
),
),
],
),
),
),
]
),
)
);
}
current behavior: App Demo of Current Behavior
I was finally able to solve this and found exactly what I was looking for here:
https://stackoverflow.com/a/59859741/13727011
Also, there is an excellent YouTube tutorial on how to implement such Dropdown here:
https://youtu.be/j5DkShqvIAU
I'm trying my hands on a music app using flutter. When an item/music card is tapped, the icon changes to the pause icon to show that its playing. But when i tap card-1, the icon changes(as it should), but when i tap card-2 or any other card, that card also changes icon but card-1 still has the pause icon. How do i change the icon of card-1 to default icon when any other card is tapped?
Currently im using a ListView.builder() to list out all the music cards. the actual card is built with a stateful widget in another file. and the state management is done in that file.
ListView in main.dart
ListView.builder(
shrinkWrap: true,
controller: ScrollController(),
itemCount: allPodcasts.length,
itemBuilder: (BuildContext context, index){
return LongCard(podcast: allPodcasts[index]);
},
)
longcard.dart
class LongCard extends StatefulWidget {
final Podcast podcast;
LongCard({this.podcast});
#override
_LongCardState createState() => _LongCardState();
}
class _LongCardState extends State<LongCard> {
bool playingState;
#override
void initState() {
super.initState();
setState((){
playingState = false;
});
}
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(bottom: 15.0),
child: InkWell(
onTap: (){
setState((){
if(playingState){
playingState = false;
}else{
playingState = true;
}
});
},
child: Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 1.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(topLeft: Radius.circular(10.0), bottomLeft: Radius.circular(10.0) ),
child: Image(
image: AssetImage(widget.podcast.image),
height: 100.0,
width: 100.0,
fit: BoxFit.fill
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Align(
alignment: Alignment.topLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
widget.podcast.date,
style: Theme.of(context).textTheme.body1,
overflow: TextOverflow.ellipsis,
),
SizedBox(height:5.0),
Text(
widget.podcast.title,
style: Theme.of(context).textTheme.display1,
overflow: TextOverflow.ellipsis,
),
],
),
)
),
Expanded(
child: SizedBox()
),
Container(
alignment: Alignment.centerRight,
height: 100.0,
width: 70.0,
decoration: BoxDecoration(
color: lightCoral,
borderRadius: BorderRadius.only(topRight: Radius.circular(10.0), bottomRight: Radius.circular(10.0) ),
),
child: Center(
child: Icon(
(playingState == true ) ? Icons.pause : Icons.headset,
size: 40.0
)
)
),
],
)
),
),
);
}
I expect that on tap on one card the icons in the other cards are changed to the default icon and then the icon on the tapped card is changed to indicate that its active.
Manage the state of the list from the parent widget that contains the ListView.
Your LongCard widget should be a stateless widget that only displays the data, not manages it. It will only tell the parent widget to switch to another index on press.
class Page extends StatefulWidget {
#override
_PageState createState() => _PageState();
}
class _PageState extends State<Page> {
// List index of the podcast that is playing right now
int activeIndex;
void _setActivePodcast(int index) {
setState(() {
activeIndex = index;
});
}
#override
Widget build(BuildContext context) {
return Container(
child: ListView.builder(
shrinkWrap: true,
controller: ScrollController(),
itemCount: allPodcasts.length,
itemBuilder: (BuildContext context, index) {
return LongCard(
podcast: allPodcasts[index],
listIndex: index,
isPlaying: activeIndex == index,
onPress: _setActivePodcast,
);
},
),
);
}
}
class LongCard extends StatelessWidget {
final Podcast podcast;
final bool isPlaying;
final int listIndex;
final Function(int index) onPress;
const LongCard({
Key key,
this.podcast,
this.listIndex,
this.onPress,
this.isPlaying: false,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(bottom: 15.0),
child: InkWell(
onTap: () => onPress(listIndex),
child: Card(
margin: EdgeInsets.zero,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 1.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(10.0),
bottomLeft: Radius.circular(10.0)),
child: Image(
image: AssetImage(podcast.image),
height: 100.0,
width: 100.0,
fit: BoxFit.fill),
),
Padding(
padding:
EdgeInsets.symmetric(horizontal: 15.0, vertical: 20.0),
child: Align(
alignment: Alignment.topLeft,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Text(
podcast.date,
style: Theme.of(context).textTheme.body1,
overflow: TextOverflow.ellipsis,
),
SizedBox(height: 5.0),
Text(
podcast.title,
style: Theme.of(context).textTheme.display1,
overflow: TextOverflow.ellipsis,
),
],
),
)),
Expanded(child: SizedBox()),
Container(
alignment: Alignment.centerRight,
height: 100.0,
width: 70.0,
decoration: BoxDecoration(
color: lightCoral,
borderRadius: BorderRadius.only(
topRight: Radius.circular(10.0),
bottomRight: Radius.circular(10.0)),
),
child: Center(
child: Icon(
isPlaying ? Icons.pause : Icons.headset,
size: 40.0,
),
),
),
],
)),
),
);
}
}
You can't dynamically change the icon like that because as it is already defined in the Icon() widget. The Icon() widget is not interactive as explained in the documentation.
https://api.flutter.dev/flutter/widgets/Icon-class.html
You should change Icon() to IconButton() and then you can change the icon inside dynamically using iconData similar to this:
How to change IconButton's icon from callback function in flutter
Or you should return two different Icon() types depending on the value of the boolean playingState
child: Center(
child: playingState ? Icon(Icons.pause, size: 40.0) : Icon(Icons.headset, size: 40.0)
)