笔记:flutter中一些不错的 UI 相关库推荐(不断更新)
warning:
这篇文章距离上次修改已过193天,其中的内容可能已经有所变动。
在Flutter中,有许多库可以帮助开发者创建出色的UI。以下是一些值得一试的库:
- Flutter Flow
Flutter Flow是一个提供动态布局的库。它允许用户在运行时更改布局。
示例代码:
Flow(
delegate: MyFlowDelegate(),
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Button 1'),
),
RaisedButton(
onPressed: () {},
child: Text('Button 2'),
),
],
)
class MyFlowDelegate extends FlowDelegate {
@override
bool shouldRepaint(FlowDelegate oldDelegate) {
return true;
}
@override
void paintChildren(FlowPaintingContext context) {
var count = context.childCount;
for (int i = 0; i < count; i++) {
var child = context.getChildSize(i);
var isEven = i.isEven;
var position = Offset(
isEven ? 0.0 : child.width,
isEven ? child.height / 2 : 0,
);
context.paintChild(i, transform: Matrix4.translationValues(position.dx, position.dy, 0.0));
}
}
}
- Flutter Slider
Flutter Slider是一个提供各种滑块小部件的库。
示例代码:
Slider(
value: _currentSliderValue,
min: 0.0,
max: 100.0,
onChanged: (double value) {
setState(() {
_currentSliderValue = value;
});
},
)
- Flutter Carousel Slider
Flutter Carousel Slider是一个提供视图滑块的库,支持无限滑动。
示例代码:
CarouselSlider(
items: [
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.teal,
),
child: Text('text 1'),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.orange,
),
child: Text('text 2'),
),
Container(
margin: EdgeInsets.all(5.0),
decoration: BoxDecoration(
color: Colors.pink,
),
child: Text('text 3'),
),
],
)
- Flutter Animated Text Kit
Flutter Animated Text Kit是一个提供各种文本动画的库。
示例代码:
Container(
color: Colors.black,
child: Center(
child: FadeIn(
duration: Duration(seconds: 2),
child: Text(
'Fade In Text',
style: TextStyle(
fontSize: 30.0,
color: Colors.teal,
),
),
),
),
)
- Flutter Rive
Flutter Rive是一个提供动画的库。
示例代码:
RiveAnimation.asset('assets/animations/hand.riv')
- Flutter Charts
Flutter Charts是一个提供各种图表的库。
示例代码:
charts.TimeSeriesChart(
[
charts.Series<MyData, DateTime>(
id: 'Charts',
评论已关闭