caduandrade
commented
2 years ago Hi @lrmoorejr ! Thanks.
Sorry if I didn't understand the question/problem correctly.
The simplest way to animate the dividers is just to define the colors (color and highlightedColor). The animationEnabled parameter (true by default), will animate the color between color and highlightedColor:
MultiSplitViewTheme theme = MultiSplitViewTheme(
data: MultiSplitViewThemeData(
dividerPainter: DividerPainters.grooved2(
color: Colors.blue.withAlpha(0),
highlightedColor: Colors.blue)),
child: multiSplitView);This will animate the dividers when the mouse is over them.
But if you're trying to animate without the mouse over, try to disable de animation with animationEnabled = false.
I changed the example to be as close as possible to the code you put in and apparently it worked by starting the animation on the click of buttons:
import 'package:flutter/material.dart';
import 'package:multi_split_view/multi_split_view.dart';
void main() => runApp(MultiSplitViewExampleApp());
class MultiSplitViewExampleApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MultiSplitViewExample(),
);
}
}
class MultiSplitViewExample extends StatefulWidget {
final List<Color> _colors = [Colors.red, Colors.blue, Colors.green];
@override
_MultiSplitViewExampleState createState() => _MultiSplitViewExampleState();
}
class _MultiSplitViewExampleState extends State<MultiSplitViewExample>
with TickerProviderStateMixin {
late AnimationController _controller;
late Animation _animationCurve;
@override
void initState() {
super.initState();
_controller = new AnimationController(
duration: new Duration(milliseconds: 3000), vsync: this)
..addListener(() {
print('value ' + _animationCurve.value.toString());
//setState(() {});
});
_animationCurve = new Tween(
begin: 0.5,
end: 1.0,
).animate(
new CurvedAnimation(parent: _controller, curve: Curves.bounceOut));
}
@override
Widget build(BuildContext context) {
Widget buttons = Container(
child: Row(children: [
ElevatedButton(
child: Text('Forward'), onPressed: _onForwardButtonClick),
SizedBox(width: 16),
ElevatedButton(
child: Text('Reverse'), onPressed: _onReverseButtonClick)
], crossAxisAlignment: CrossAxisAlignment.center),
color: Colors.white,
padding: EdgeInsets.all(8));
List<Widget> children = List.empty(growable: true);
for (int i = 0; i < 3; i++) {
Widget view = Container(
child: Center(child: Text("View " + (i + 1).toString())),
color: widget._colors[i % widget._colors.length],
);
children.add(view);
}
MultiSplitView multiSplitView = MultiSplitView(
children: children,
controller: MultiSplitViewController(initialWeights: [.05, .1, .6]));
AnimatedBuilder animatedBuilder = AnimatedBuilder(
animation: _animationCurve,
builder: (context, widget) {
return MultiSplitViewTheme(
data: MultiSplitViewThemeData(
dividerPainter: DividerPainters.grooved2(
animationEnabled: false,
color: Colors.blue
.withAlpha((_animationCurve.value * 255).round()),
highlightedColor: Colors.red)),
child: multiSplitView);
});
return Scaffold(
appBar: AppBar(title: Text('Multi Split View Example')),
body: Column(children: [buttons, Expanded(child: animatedBuilder)])
// body: horizontal,
);
}
_onReverseButtonClick() {
_controller.reverse();
}
_onForwardButtonClick() {
_controller.forward();
}
}Was I helpful? Hope so.
lrmoorejr
Hello! This is a great widget, thanks for sharing it. I've noticed one little thing, though:
I'm trying to animate a fade in of the divider like this:
I've confirmed that the the color values are getting animated correctly, and it winds up with 0xffd0d0d0 after the animation is complete, but the divider remains completely transparent on screen, even when I force refreshes.