我正在尝试在抖动中实现水平条形图。我遇到了这些软件包fl_charts和chart_flutter。但我需要自定义外观,使其与我附加的以下图像匹配。 如果有任何冠军能支持我给我一些实现方法的示例,或者提供示例代码,将非常有帮助。 提前非常感谢您。
答案 0 :(得分:3)
使用LayoutBuilder知道可能的宽度,并使用IntrinsicWidth计算标题和数字的位置,但同时不要缩小长标题文本。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
body: SafeArea(
child: MyHomePage(),
),
),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_title('Food Weight(grams)'),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ChartLine(title: 'Fat', number: 1800, rate: 1),
ChartLine(title: 'Protein', number: 600, rate: 0.4)
],
),
),
_title('Ratios'),
Padding(
padding: const EdgeInsets.only(left: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ChartLine(
title: 'Calculum/Phosporous ratio = 2:1',
rate: 0.5,
),
ChartLine(
title: 'Omega3/6 ratio = 1:4',
rate: 0.4,
),
],
),
),
],
),
);
}
Widget _title(String title) {
return Padding(
padding: const EdgeInsets.only(bottom: 8.0, top: 4),
child: Text(
title,
style: TextStyle(fontSize: 18),
),
);
}
}
class ChartLine extends StatelessWidget {
const ChartLine({
Key key,
@required this.rate,
@required this.title,
this.number,
}) : assert(title != null),
assert(rate != null),
assert(rate > 0),
assert(rate <= 1),
super(key: key);
final double rate;
final String title;
final int number;
@override
Widget build(BuildContext context) {
return LayoutBuilder(builder: (context, constraints) {
final lineWidget = constraints.maxWidth * rate;
return Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
constraints: BoxConstraints(minWidth: lineWidget),
child: IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
title,
style: TextStyle(
fontSize: 18,
),
),
if (number != null)
Text(
number.toString(),
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
],
),
),
),
Container(
color: Colors.blue,
height: 60,
width: lineWidget,
),
],
),
);
});
}
}
答案 1 :(得分:0)
您可以使用 Syncfusion 的 Flutter 图表包,就像我现在用于我的应用程序一样。使用 Syncfusion 的 SfCartesianChart 小部件,将条形图与数据标签一起呈现,并通过更改数据标签的默认位置来实现您的输出。此小部件适用于 Android、iOS 和网络平台。