Блог

Я пытаюсь создать горизонтальную столбчатую диаграмму в flutter. Я наткнулся на эти пакеты fl_charts и charts_flutter. но мне нужно настроить внешний вид, чтобы он соответствовал следующему изображению, которое я прикрепил. Если какой-либо чемпион может поддержать меня, предоставив мне шаги по достижению этого, или примерный код будет очень полезен. Заранее большое вам спасибо.

Используйте 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,
            ),
          ],
        ),
      );
    });
  }
}
  

Вы можете использовать пакет Flutter charts от Syncfusion, который я использую сейчас для своего приложения. Используя виджет SfCartesianChart от Syncfusion, отобразите столбчатую диаграмму вместе с метками данных, и, изменив положение метки данных по умолчанию, вы сможете получить результат. Этот виджет работает на 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