Flutter의 가로 막대 차트

Question

나는 flutter에서 수평 막대 차트를 얻으려고 노력하고 있습니다. 이 패키지 fl_charts 및 charts_flutter를 보았습니다. 하지만 첨부 한 다음 이미지와 일치하도록 룩을 사용자 정의해야합니다. 어떤 챔피언이 저를 지원할 수 있다면이를 달성하는 방법에 대한 단계를 제공하거나 모범적 인 코드가 많은 도움이 될 것입니다. 미리 감사드립니다.

Answer 1

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,
            ),
          ],
        ),
      );
    });
  }
}

Answer 2

내 애플리케이션에 지금 사용하고있는 것처럼 Syncfusion의 Flutter 차트 패키지를 사용할 수 있습니다. Syncfusion의 SfCartesianChart 위젯을 사용하여 데이터 레이블과 함께 막대 차트를 렌더링하고 데이터 레이블의 기본 위치를 변경하여 출력을 얻을 수 있습니다. 이 위젯은 Android, iOS 및 웹 플랫폼에서 작동합니다.

• 꾸러미- https://pub.dev/packages/syncfusion_flutter_charts
• 풍모- https://www.syncfusion.com/flutter-widgets/flutter-charts
• 선적 서류 비치- https://help.syncfusion.com/flutter/cartesian-charts/overview