flutter - 如何将屏幕上输入的数据划分为区域(flutter)

Question

我是新手，我不知道如何正确地对显示的数据进行分区。在屏幕上我想显示一个饼图，一个免费密封的计数器，以及用户的数据(我还在开发这部分)。但我不明白该怎么做。我将不胜感激您的帮助!
这是我的代码(更改):

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'package:charts_flutter/flutter.dart' as charts;
import  'package:flutter_app_seals/model/setting/globalvar.dart' as global;
void main()=>runApp(AppS());

class Task{
  String task;
  int taskvalue;
  Color colors;
  Task({this.task,this.taskvalue,this.colors});
}



class AppS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home:Home()
    );
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {

  List<dynamic> data = [];
  Map<String, dynamic> statsIndia;
  List<charts.Series<Task, String>> _seriesPieData =
  List<charts.Series<Task, String>>();
  int a, b, c;

  Future<Null> getUserDetails() async {


    HttpClient client = new HttpClient();
    client.badCertificateCallback = ((X509Certificate cert, String host, int port) => true);

    final String url = global.urlVar +  '/PIE' + '?data_area=' + global.dataArea;
    final request = await client
        .getUrl(Uri.parse(url))
        .timeout(Duration(seconds: 5));

    HttpClientResponse response = await request.close();

    var responseBody = await response.transform(utf8.decoder).join();


    data = json.decode(responseBody);
    statsIndia = data[0];
    a = statsIndia["unseals"];
    b = statsIndia["seals"];
    c = statsIndia["free_seals"];
    print(a);
    get();
    setState(() {});
  }


  get() {
    var piedata = [
      new Task(task: "Seals", taskvalue: a, colors: Color(0xfffd2525)),
      new Task(task: "Unseals", taskvalue: b, colors: Color(0xffb5e09b))
    ];
    _seriesPieData.add(charts.Series(
      data: piedata,
      domainFn: (Task task, _) => task.task,
      measureFn: (Task task, _) => task.taskvalue,
      colorFn: (Task task, _) => charts.ColorUtil.fromDartColor(task.colors),
      labelAccessorFn: (Task row, _) => '${row.taskvalue}',
    ));
    print(_seriesPieData.length);
  }

  @override
  void initState() {
    super.initState();
    getUserDetails();
  }


   @override
  Widget build(BuildContext context) {
return Scaffold(
  body: Container(
      decoration: BoxDecoration(
        gradient: LinearGradient(
            colors: [Colors.blue, Colors.white],
            begin: Alignment.topCenter,
            end: Alignment.bottomCenter),
      ),

        child: Stack(
        children: <Widget>[

            Container(
                child: Center(
                  child: Column(
                    children: [
                      Row(
                        children:  <Widget>[
                            Container(
                                width : 12,
                                height:12,
                                child: charts.PieChart(
                                  _seriesPieData,
                                  animate: true,
                                  animationDuration: Duration(seconds: 1),
                                  behaviors: [
                                    new charts.DatumLegend(
                                      outsideJustification:
                                      charts.OutsideJustification.endDrawArea,
                                      horizontalFirst: false,
                                      desiredMaxRows: 1,
                                      cellPadding: new EdgeInsets.only(
                                          right: 4.0, bottom: 4.0),
                                      entryTextStyle: charts.TextStyleSpec(
                                          color: charts
                                              .MaterialPalette.purple.shadeDefault,

                                          fontSize: 11),
                                    ),
                                  ],
                                  defaultRenderer: new charts.ArcRendererConfig(
                                      arcWidth: 70,
                                      arcRendererDecorators: [
                                        new charts.ArcLabelDecorator(
                                            labelPosition:
                                            charts.ArcLabelPosition.inside)
                                      ]),
                                ),
                              )

                        ],
                      ),


                                Row(
                                    children: [
                                    Column(
                                    children:[

                                       Row(
                                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                        children: <Widget>[
                                          Expanded(
                                            child: Text(

                                                "Count free seals:" + "$c",
                                                style: TextStyle(color: Colors.black, fontSize: 20)
                                            ),


                                          ),
                                        ],
                                      ),
                                    ],
                                    )  ,
                                ],
                              ),
                    ],
                  )
                ),
            )
          ],
        ),
      )
  );
  }
}

屏幕 :

我想如何分享(示例):

Answer 1

最好的方法(也可能是 Flutter 中唯一的方法)是使用列、行和容器。
根据您分享的示例，我会选择:

import 'dart:async';
import 'package:flutter/material.dart';
import 'dart:convert';
import 'dart:io';
import 'globalvar.dart' as global;

import 'package:charts_flutter/flutter.dart' as charts;

void main() => runApp(AppS());

class Task {
  String task;
  int taskvalue;
  Color colors;
  Task({this.task, this.taskvalue, this.colors});
}

class AppS extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Home());
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  List<dynamic> data = [];
  Map<String, dynamic> statsIndia;
  List<charts.Series<Task, String>> _seriesPieData;
  int a, b, c;

  Future<Null> getUserDetails() async {
    HttpClient client = new HttpClient();
    client.badCertificateCallback =
        ((X509Certificate cert, String host, int port) => true);

    final String url = global.urlVar + '/PIE' + '?data_area=' + global.dataArea;
    final request =
        await client.getUrl(Uri.parse(url)).timeout(Duration(seconds: 5));

    HttpClientResponse response = await request.close();

    var responseBody = await response.transform(utf8.decoder).join();

    data = json.decode(responseBody);
    statsIndia = data[0];
    a = statsIndia["unseals"];
    b = statsIndia["seals"];
    c = statsIndia["free_seals"];
    print(a);
    get();
    setState(() {});
  }

  get() {
    var piedata = [
      new Task(task: "Seals", taskvalue: a, colors: Color(0xfffd2525)),
      new Task(task: "Unseals", taskvalue: b, colors: Color(0xffb5e09b))
    ];
    _seriesPieData.add(charts.Series(
      id: "1", //Was missing
      data: piedata,
      domainFn: (Task task, _) => task.task,
      measureFn: (Task task, _) => task.taskvalue,
      colorFn: (Task task, _) => charts.ColorUtil.fromDartColor(task.colors),
      labelAccessorFn: (Task row, _) => '${row.taskvalue}',
    ));
    print(_seriesPieData.length);
  }

  @override
  void initState() {
    super.initState();
    getUserDetails();
  }

  @override
  Widget build(BuildContext context) {
    var maxWidth = MediaQuery.of(context).size.width;
    var maxHeight = MediaQuery.of(context).size.height;

    return Scaffold(
      body: Stack(
        children: [
          //The background container
          Container(
            width: maxWidth,
            height: maxHeight,
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  colors: [Colors.blue, Colors.white],
                  begin: Alignment.topCenter,
                  end: Alignment.bottomCenter),
            ),
          ),
          //The foreground container which will hold all your cards wrapped in a column
          Container(
            child: Column(
              children: [
                //The "Pie Chart" card
                _seriesPieData.length > 0
                ? Container(
                  width: maxWidth - 30, //I deducted the margin
                  height: (maxHeight * 0.3) -
                      30, //I set the pie chart card to 1/3 of the screen, minus the margin
                  margin: EdgeInsets.fromLTRB(15, 15, 15, 15),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(
                          20),
                      ),
                  child: charts.PieChart(
                    _seriesPieData,
                    animate: true,
                    animationDuration: Duration(seconds: 1),
                    behaviors: [
                      new charts.DatumLegend(
                        outsideJustification:
                            charts.OutsideJustification.endDrawArea,
                        horizontalFirst: false,
                        desiredMaxRows: 1,
                        cellPadding:
                            new EdgeInsets.only(right: 4.0, bottom: 4.0),
                        entryTextStyle: charts.TextStyleSpec(
                            color: charts.MaterialPalette.purple.shadeDefault,
                            fontSize: 11),
                      ),
                    ],
                    defaultRenderer: new charts.ArcRendererConfig(
                        arcWidth: 70,
                        arcRendererDecorators: [
                          new charts.ArcLabelDecorator(
                              labelPosition: charts.ArcLabelPosition.inside)
                        ]),
                  ),
                )
                :Container(),
                //The "Count free seals" card
                Container(
                  width: maxWidth - 30, //I deducted the margin
                  height: (maxHeight * 0.7) -
                      30, //I set the user data card to 2/3 of the screen, minus the margin
                  margin: EdgeInsets.fromLTRB(15, 15, 15, 15),
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(
                          20),
                      ),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: <Widget>[
                      Expanded(
                        child: Text("Count free seals:" + "$c",
                            style:
                                TextStyle(color: Colors.black, fontSize: 20)),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

结果如下所示: