Future Builder not rendering data table

Question

in want create table from api response.i created data table using future builder. The future builder fires api twice not not return any data

class HomeScreen extends StatefulWidget {
 const HomeScreen({super.key});
 
 @override
 State<HomeScreen> createState() => _HomeScreenState();
}
 
class _HomeScreenState extends State<HomeScreen> {
 @override
 Widget build(BuildContext context) {
   return Scaffold(
     body: FutureBuilder(
       future: unpaid(),
       builder: (context, snapshot) {
         if (snapshot.hasData) {
           return Container(
               padding: const EdgeInsets.all(5),
               child:
                   Dataclass(datalist: snapshot.data as List<UnpaidDetails>));
         } else {
           return Container(
 
               // padding: const EdgeInsets.all(5),
               // child: Dataclass(
               //     datalist: snapshot.data as List<UnpaidDetails>)
               );
         }
       },
     ),
   );
 }
 
 Future<String?> getToken() async {
   final SharedPreferences prefs = await SharedPreferences.getInstance();
   return prefs.getString('token');
 }
 
 Future<List<UnpaidDetails>> unpaid() async {
   String? token = await getToken();
 
   final response = await http.get(
       Uri.parse('https://test.url/api/unpaid'),
       headers: {
         'Content-Type': 'application/json',
         'Accept': 'application/json',
         'Authorization': 'Bearer $token',
       });
 
   if (response.statusCode == 200) {
     var result = jsonDecode(response.body);
     List jsonResponse = result["UnpaidDetails"] as List;
 
     return jsonResponse.map((e) => UnpaidDetails.fromJson(e)).toList();
   } else {
     throw Exception('Failed to update album.');
   }
 }
}
 
class Dataclass extends StatefulWidget {
 Dataclass({Key? key, required List<UnpaidDetails> this.datalist})
     : super(key: key);
 List<UnpaidDetails> datalist;
 @override
 DataclassState createState() {
   return DataclassState();
 }
}
 
class DataclassState extends State<Dataclass> {
 @override
 Widget build(BuildContext context) 
  return SingleChildScrollView(
       scrollDirection: Axis.vertical,
       child: FittedBox(
           child: DataTable(
         sortColumnIndex: 1,
         showCheckboxColumn: false,
         border: TableBorder.all(width: 1.0),
         columns: const [
           DataColumn(
               label: Text(
             "Period",
             style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
           )),
           DataColumn(
               label: Text(
             "Amount",
             style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
           )),
         ],
         rows: widget.datalist
             .map((data) => DataRow(cells: [
                   DataCell(
                     Text(data.month,
                         style: const TextStyle(
                             fontSize: 26, fontWeight: FontWeight.w500)),
                   ),
                   DataCell(
                     Text(data.price.toString(),
                         style: const TextStyle(
                             fontSize: 26, fontWeight: FontWeight.w500)),
                   ),
                 ]))
             .toList(),
       )));     }}

1 api call twice

api call fires twice the first one bring response. second one is send request without header and receive error. i am using jsontodart.in to create class. Help me execute future builder in clean way

score 1 · Answer 1 · answered Jan 13 '23 at 17:25

For the non data problem :

Remove your getter :

get datalist => null;

declare a datalist variable in your Datatable class:

class Dataclass extends StatefulWidget {
  Dataclass({Key? key, required List<UnpaidDetails> this.datalist})
      : super(key: key);

  List<UnpaidDetails> datalist;

And read it from your state with

rows: widget.datalist

instead of

rows: datalist

And for your second call. You don't have to make a call in initstate. So you can delete your initstate method and change your future builder like this :

        body: FutureBuilder(
        future: unpaid(),

Thanks for your support . full code updated. still api fires twice and getting error implement correction in dataclass — Hari .S, Jan 14 '23 at 05:19

Future Builder not rendering data table

1 Answers1