0

I'm facing issue with scrolling bar, the lists of data load at bottom rather than showing at top.I have made code dynamic which is loading according to conditions. I'm new flutter I have written code as from different side and still learning, If you want to give suggest me to written in better way please go ahead let me know the change where I can do.

class EventsPageState extends State<EventsPage>
    with SingleTickerProviderStateMixin {
  int theirGroupValue = 0;

  List data = List();

  String url = 'https://e19f7c9d.ngrok.io/api/events/westernaf/packages';
  Future<String> makeRequest() async {
    var response = await http
        .get(Uri.encodeFull(url), headers: {"Accept": "application/json"});
    setState(() {
      var extractdata = json.decode(response.body);
      data = extractdata["result"];
    });
    for (var i = 0; i < data.length; i++) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        if (data[i]['regTypeId'] == 1) {
          this.theirGroupValue = 0;
        } else if (data[i]['regTypeId'] == 2) {
          this.theirGroupValue = 1;
        } else if (data[i]['regTypeId'] == 3) {
          this.theirGroupValue = 2;
        } else {
          this.theirGroupValue = 0;
        }
      }
    }
  }

  final Map<int, Widget> logoWidgets = const <int, Widget>{
    0: Text('Early Bird'),
    1: Text('General'),
    2: Text('Onsite'),
  };

  List<bool> inputs = new List<bool>();

  @override
  void initState() {
    super.initState();
    this.makeRequest();
    setState(() {
      for (int i = 0; i < 35; i++) {
        inputs.add(false);
      }
    });
  }

  void ItemChange(bool val, int index) {
    setState(() {
      inputs[index] = val;
    });
  }

  static Widget giveCenter(String ListView) {
    return new Card(
      // child Container(
      child: Text(
        "Text: $ListView",
        style: TextStyle(color: Colors.blue, fontSize: 20.0),
        // )
      ),
    );
  }

  void _Register() {
    Navigator.push(
        context, new MaterialPageRoute(builder: (context) => LandingScreen()));
  }

  @override
  Widget _listingShow(i) {
    if (data[i]['regTypeId'] == 1) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  @override
  Widget _listingShow2(i) {
    if (data[i]['regTypeId'] == 2) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  @override
  Widget _listingShow3(i) {
    if (data[i]['regTypeId'] == 3) {
      var startTime = data[i]['start_date'].split('T')[0];
      var endTime = data[i]['end_date'].split('T')[0];
      final todayDate = DateTime.now();
      final pkgStartDate = DateTime.parse(startTime);
      final pkgEndDate = DateTime.parse(endTime);
      final difDate = todayDate.isAfter(pkgStartDate);
      final difDate2 = todayDate.isBefore(pkgEndDate);
      if (difDate && difDate2 == true) {
        return new Row(
          children: <Widget>[
            Expanded(
              child: Text(data[i]["packageName"]),
            ),
            Expanded(
              child: Text((data[i]["price"]).toString()),
            ),
            Expanded(
              child: Checkbox(
                value: inputs[i],
                onChanged: (bool val) {
                  ItemChange(val, i);
                },
              ),
            ),
          ],
        );
      }
    }
  }

  Widget build(BuildContext context) {
    List<Widget> bodies = [
      new ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow(i),
          );
        },
      ),
      new ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow2(i),
          );
        },
      ),
      new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow3(i),
          );
        },
      ),
    ];

    return Scaffold(
      body: bodies[this.theirGroupValue],
      appBar: AppBar(
        elevation: 2.0,
        backgroundColor: Colors.white,
        centerTitle: true,
        title: Text(
          'Select conference Package',
          style: TextStyle(color: Colors.black),
        ),
        bottom: PreferredSize(
          preferredSize: Size(double.infinity, 45.0),
          child: Padding(
            padding: EdgeInsets.only(top: 5.0, bottom: 10.0),
            child: Row(
              children: <Widget>[
                SizedBox(
                  width: 15.0,
                ),
                Expanded(
                  child: CupertinoSegmentedControl(
                    groupValue: this.theirGroupValue,
                    onValueChanged: (changeFromGroupValue) {
                      setState(() {
                        theirGroupValue = this.theirGroupValue;
                      });
                    },
                    children: logoWidgets,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

enter image description here

I have attached the pic above, If you want to c all code I will push all the code.If needed , all I want to c listing at the top

2
  • Please add the code for the body Jul 24, 2019 at 11:22
  • I have upload code, If anything change is required in code apart from the issue, please let me know , still I'm learning Jul 24, 2019 at 11:31

1 Answer 1

2

in bodies, you define the ListViews like this:

ListView.builder(
        itemCount: data.length,
        itemBuilder: (BuildContext context, i) {
          return ListTile(
            title: _listingShow(i),
          );
        },
      ),

And this it listingShow, which returns the widget you use as the title property of your ListView.

Widget _listingShow3(i) {
    if (data[i]['regTypeId'] == 3) {
      // construct and return the widget
    }
  }

The problem is, your ListView has always a fixed number of items which is data.length, but in your function, you only return a widget if the data matches a certain type (if (data[i]['regTypeId'] == 3)), else, you return nothing. But the ListTile is always there, it just doesn't show anything.

enter image description here

My suggestion is to divide data into 3 separate lists, you can see how I did it here, it's probably not optimised, you'll need to figure out a better way.

1
  • yaa. Its running perfect. thanks for your time spending on my issue, really appreciate @doppelledev Jul 24, 2019 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.