Flutter 提供了丰富的开源组件库,以下是一些常用的Flutter开源组件库:
- fluttertoast: 一个可以显示toast的Flutter插件。
import 'package:fluttertoast/fluttertoast.dart';
Fluttertoast.showToast(
msg: "Hello, World!",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white
);
- cached\_network\_image: 显示网络图片的时候,如果没有加载出来时,会有一个加载中的提示,加载失败时会有一个错误提示。
import 'package:cached_network_image/cached_network_image.dart';
CachedNetworkImage(
placeholder: (context, url) => new CircularProgressIndicator(),
errorWidget: (context, url, error) => new Icon(Icons.error),
imageUrl: 'https://www.example.com/image.png',
);
- flutter\_swiper: 一个Flutter轮播组件。
import 'package:flutter_swiper/flutter_swiper.dart';
Swiper(
itemCount: 3,
itemBuilder: (BuildContext context, int index) {
return new Image.network("http://www.example.com/image$index.png");
},
pagination: new SwiperPagination(),
control: new SwiperControl(),
)
- flutter\_staggered\_grid\_view: 一个创建动画或者过渡效果的Flutter网格视图。
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
StaggeredGridView.count(
crossAxisCount: 4,
itemCount: 8,
itemBuilder: (BuildContext context, int index) {
return new Card(
child: new Column(
children: <Widget>[
new AspectRatio(
aspectRatio: 17 / 12,
child: new Image.network(
'http://www.example.com/image$index.png',
fit: BoxFit.fill,
),
),
new Container(
padding: const EdgeInsets.all(8.0),
child: new Text('Staggered Grid View Example'),
),
],
),
);
},
staggeredTileBuilder: (int index) =>
new StaggeredTile.count(2, index.isEven ? 2 : 1),
)
- flutter\_html\_view: 一个可以渲染HTML的Flutter组件。
import 'package:flutter_html_view/flutter_html_view.dart';
FlutterHtmlView(
htmlData: "<h1>Hello, World!</h1>",
)
- flutter\_calendar: 一个日历组件。
import 'package:flutter_calendar/flutter_calendar.dart';
CalendarController _calendarController;
Widget build(BuildContext context) {
_calendarController = CalendarController();
return Container(
child: Ca