Как создать список плиток динамического расширения c из Rest API во Flutter? - PullRequest
Новая
       7

Как создать список плиток динамического расширения c из Rest API во Flutter?

0 голосов
/ 28 марта 2020

Я пытался создать расширяемый список из JSON списка данных, который поступает из Rest API через HTTP-запрос на получение. Он успешно генерирует построитель ListView от ListView, но не ExpansionTile.

У меня есть JSON данные списка, в которых есть три лучших ученика с разными атрибутами, такими как Name, Reg, Discipline, Section, Smester и cgpa. Я хочу показать в расширяемом списке, чье название расширенного списка выглядит так: «Дисциплина + Семестр + Раздел», и все трое учеников будут его детьми. Image 1

import 'dart:async';
import 'dart:convert';
import 'dart:ui';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

class bscsdata extends StatefulWidget {
  @override
  _bscsdataState createState() => _bscsdataState();
}

class _bscsdataState extends State<bscsdata> {

   List data;

   Future<String> getdata() async{
     var response = await http.get(
       Uri.encodeFull("http://192.168.8.101:88//api/student/allstudents"),
     headers: {
       "Accept" : "application/json"
     }
     );
     this.setState((){
       data = json.decode(response.body);
     });
   }
@override
  void initState() {
    this.getdata();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          'BSCS',
          style: TextStyle(
            color: Colors.white,
            fontSize: 25.0,
          ),
        ),
        backgroundColor: Colors.blue,
      ),
      body: new ListView.builder(
        itemCount: data == null ? 0 : data.length,
        itemBuilder: (BuildContext context, int index){
          return new ListTile(
            title: new Text(data[index]["Name"])
          );
        },
      )
    );
  }
}

Image 2

1 Ответ

0 голосов
/ 02 апреля 2020

Вы можете использовать расширяемый пакет.

Я пытался создать то, что вы хотите, основываясь на вашем json. 

class Student {
  final String discipline;
  final String semester;
  final String section;
  final String name;

  Student({this.discipline, this.semester, this.section, this.name});
}

Затем, на вашем методе сборки 

  List<Student> _studentGroup = <Student>[
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name'),
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name2'),
    Student(discipline: 'BCS', semester: '7', section: 'B', name: 'Test Name3'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        //appbar
        body: Container(
          width: double.infinity,
          child: ExpandablePanel(
            header: Text(
                '${_studentGroup[0].discipline} ${_studentGroup[0].semester} ${_studentGroup[0].section}'),
            expanded: ListView.builder(
              shrinkWrap: true,
              itemCount: _studentGroup == null ? 0 : _studentGroup.length,
              itemBuilder: (BuildContext context, int index) {
                return ListTile(
                    title: Text(_studentGroup[index].name),
                    subtitle: Text(
                      '${_studentGroup[index].discipline} - ${_studentGroup[index].semester}',
                    ));
              },
            ),
          ),
        ));
  }
...