[animations package] FadeThroughTransition doesn't work correctly with ListTile.tileColor when ThemeData.canvasColor is specified #104543
Comments
|
Hi @gidrokolbaska, Thanks for filing the issue. Looks like the code sample you shared is incomplete, However, With the below code sample, I see it working as intended. code sampleimport 'package:animations/animations.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _pageIndex = 0;
final _pageList = [
const MyHomePage(),
Align(
alignment: Alignment.center,
child: Center(
child: Container(
height: 200,
width: 200,
color: Colors.red,
),
),
),
Container(
height: 200,
width: 200,
color: Colors.blue,
)
];
@override
Widget build(BuildContext context) {
return MaterialApp(
//useInheritedMediaQuery: true,
title: 'Flutter Demo',
theme: ThemeData(
canvasColor: Colors.grey,
// primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _pageIndex,
backgroundColor: Colors.blue,
onTap: (selectedIndex) {
setState(() {
_pageIndex = selectedIndex;
});
},
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.photo_library), label: 'Page1'),
BottomNavigationBarItem(icon: Icon(Icons.photo), label: 'Page2'),
BottomNavigationBarItem(icon: Icon(Icons.search), label: 'Page3'),
],
),
body: PageTransitionSwitcher(
transitionBuilder: (child, primaryAnimation, secondaryAnimation) {
return FadeThroughTransition(
//fillColor: Colors.transparent,
animation: primaryAnimation,
secondaryAnimation: secondaryAnimation,
child: child,
);
},
child: _pageList[_pageIndex],
),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Material(
child: ListView.builder(itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: ListTile(
tileColor: Colors.green,
title: Text('Item $index'),
),
);
}),
);
}
}
Screen.Recording.2022-05-25.at.3.43.02.PM.movIn case you still see the issue please share a minimal and complete code sample. flutter doctor -v (mac) |
maheshmnj
added
the
waiting for customer response
github-actions
bot
removed
the
waiting for customer response
hmm, yeah, it works by wrapping the ListTile with Material but isn't it suppose to work out of the box without the Material widget? Am I missing something? |
|
@gidrokolbaska the ListTile docs recommends wrapping ListTile in material widget for these colors to take effect.
There's a PR filed which would do this out of the box #102310 Closing as this is working as intended |
maheshmnj
added
r: solved
|
This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of |
Steps to Reproduce
Yeah, you can set the fillColor of FadeThroughTransition to Colors.transparent but in this case the transition is janky...
By running the code sample you will see some additional glitches as well, e.g. positioning of the widgets :)
Expected results:
I expect ListTile to have its' tileColor visible when using FadeThroughTransition without setting fillColor to transparent (which is also buggy)
and a video (includes both tileColor and positioning issues):
Simulator.Screen.Recording.-.iPhone.12.-.2022-05-25.at.00.05.35.mp4
Code sample
Logs
The text was updated successfully, but these errors were encountered: