How to divide the data entered on the screen into zones(flutter)

Asked By: Anonymous

I’m new to flutter, and I can’t figure out how to properly zone the data that is displayed. On the screen I want to display a pie chart, a counter of free seals, and also data on the user (I still develop this part). But I do not understand how to do it. I will be grateful for your help !.
Here is my code(change):

_x000D_

_x000D_

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)
                                            ),


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

_x000D_

_x000D_

x000D

Screen :
enter image description here

How I want to share (example):
enter image description here


Solution

Answered By: Anonymous

The best way (and maybe the only way in Flutter) to do so is by playing with columns, rows and containers.

Based on the example you shared, I would go with :

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

The result looks like this :

Result

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno