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

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 :