Can I use future builder in one page twice in flutter

Question

I have deleted my previous question and replaced it by this one may be most clear , I receive data from API and convert it to List contain (id , title , description , activity , degree ). Now I want to display data such as appear in image below : Note : (the title and description in all rows are same)

class page :

class Digree {
  final int index;
  final String title_k;
  final String title_a;
  final String aya;
  final String link;
  final String activity_k;
  final String activity_a;
  final String udigree;
  Digree(this.index, this.title_k, this.title_a, this.aya, this.link,
      this.activity_k, this.activity_a, this.udigree);
}

future function page

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:jiyanUquraan/classes/viewdigree.dart';

class DisplayList extends StatefulWidget {
  @override
  _DisplayListState createState() => _DisplayListState();
}
class _DisplayListState extends State<DisplayList> {
  @override
  Widget build(BuildContext context) {
    Map rdata = {};
    List digrees = [];
    double _value = 0;
    var widthView = MediaQuery.of(context).size.width;
    Future<List> fetchDigrees() async {
      Map rdata = ModalRoute.of(context).settings.arguments;
      int cm_id = int.parse(rdata['current_m_id'].toString());
      int d_id = int.parse(rdata['d_id'].toString());
      int w_id = int.parse(rdata['w_id'].toString());
      int u_id = int.parse(rdata['u_id'].toString());
      var url =
          'http://10.0.2.2/jiyan/test/api/digrees/day_digree.php?u_id=$u_id&m_id=$cm_id&d_id=$d_id';
      var response = await http.get(url);
      var data = jsonDecode(response.body);
      for (var x in data) {
        Digree newdigree = Digree(
            x['index'],
            x['title_k'],
            x['title_a'],
            x['aya'],
            x['link'],
            x['activity_k'],
            x['activity_a'],
            x['udigree']);
        digrees.add(newdigree);
      }
      print(digrees.length);
      print(data);
      return digrees;
    }
    return FutureBuilder(
      future: fetchDigrees(),
      builder: (context, snapshot) {
        List digrees = snapshot.data;
        if (snapshot.data == null) {
          return Center(
            child: Text("Loading"),
          );
        } else {
          return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                return Directionality(
                  textDirection: TextDirection.rtl,
                  child: Column(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                            border: Border.all(width: 2, color: Colors.white),
                            color: Color.fromRGBO(230, 200, 200, 0.2)),
                        width: widthView,
                        padding: EdgeInsets.all(25),
                        margin: EdgeInsets.all(25),
                        child: Column(
                          children: <Widget>[
                            Text(
                              snapshot.data[index].activity_k,
                              textAlign: TextAlign.justify,
                              style:
                                  TextStyle(fontSize: 32, color: Colors.white),
                            ),
                            SliderTheme(
                              data: SliderTheme.of(context).copyWith(
                                activeTrackColor: Colors.red[700],
                                inactiveTrackColor: Colors.red[100],
                                trackShape: RectangularSliderTrackShape(),
                                trackHeight: 4.0,
                                thumbColor: Colors.redAccent,
                                thumbShape: RoundSliderThumbShape(
                                    enabledThumbRadius: 12.0),
                                overlayColor: Colors.red.withAlpha(32),
                                overlayShape: RoundSliderOverlayShape(
                                    overlayRadius: 28.0),
                              ),
                              child: Slider(
                                value: 0,
                                min: 0,
                                max: 100,
                                divisions: 10,
                                label: '$_value',
                                onChanged: null,
                              ),),],),),],),);});}},);}}

display page :

import 'package:flutter/material.dart';
import 'package:jiyanUquraan/components/daylist.dart';
class Days extends StatefulWidget {
  @override
  _DaysState createState() => _DaysState();
}
class _DaysState extends State<Days> {
  var cm_id;
  var d_id;
  var w_id;
  var u_id;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.pink[900],
        title: Text(
          'ژیان و قورئان',
          style: TextStyle(fontSize: 30),
        ),
        centerTitle: true,
      ),
      body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
              image: AssetImage("assets/images/background.png"),
              fit: BoxFit.cover,
            ),
          ),
          child: DisplayList()),      
    );
  }
}

I made future builder with list view builder and i view the rows correctly ,but i can't show the title and description — Sermed Berwari, Aug 07 '20 at 18:36
Show us the code, and we will help you better. I will specifically point out the problem in the code, which will help you get the view correctly — Alok, Aug 07 '20 at 18:37
Great, waiting for that. Just add the `FutureBuilder()`, which is responsible for showing up the data. — Alok, Aug 07 '20 at 18:38
Yes, looking at it, so specifically which part is working, and which part is giving you the error? And what sort of error you are getting? — Alok, Aug 07 '20 at 18:43
I can see your code using `snapshot.data[index].title_k`, in your `DisplayList()`, where are using it to be shown in the UI? — Alok, Aug 07 '20 at 18:48
Okay, are you able to get other data via your `ListView.builder()`? Is the data showing up fine? — Alok, Aug 07 '20 at 18:50
Okay. Then only `title_k` is not shown. Could you please tell me what is the key for `description`? Cannot figure out from your `Digree` model — Alok, Aug 07 '20 at 18:52
Okay. Thanks for the details. Just last one, could you please show me how your view looks like right now. Just the screenshot would help and add it to your question. Thanks :) — Alok, Aug 07 '20 at 18:54

Alok · Accepted Answer · 2020-08-07T21:07:13.230

1

Answer 3.0

So, as far as I have understood the situation correctly, the title_k and aya needs to be called once, and then Directionality() which is getting built by Column(). Which will wrap your Directionality based upon the snapshot.data list

ListView(
  shrinkWrap: true,
  children: [
    Text('title_k'),
    Text('aya'),
    Column(
       children: snapshot.data.map<Widget>((e) => Directionality(...)).toList()
    )
  ]
)

Please note: You must get the data in the Directionality as e.key_of_digree_model. e can be anything, whatever, you will describe map((item))

For example: Text(snapshot.data[index].activity_k) will become Text(item.activity_k) in the Directionality only

Now we will write the normal code which will give you the answer. Specifically, your answer lies in DisplayList() only. So posting that as an answer

Assumption: I can see that your title_k and aya is same for every Digree Model, so I will just get the title_k and aya from the index = 0 only. Like this

// title
Text(snapshot.data[0].title_k)

//Description
Text(snapshot.data[0].aya)

DisplayList()

//specific code only, since Column() has all the data required
// inside your else of FutureBuilder
return Container(
  height: MediaQuery.of(context).size.height,
  width: MediaQuery.of(context).size.width,
  child: ListView(
     shrinkWrap: true,
     children: [
        //title
        Text(snapshot.data[0].title_k),
        //for top margin
        SizedBox(height: 20.0),
        // dexription
        Text(snapshot.data[0].aya),
        //for top margin
        SizedBox(height: 20.0),

        // your Directionality
        Column(
           mainAxisAlignment: MainAxisAlignment.center,
           crossAxisAlignment: CrossAxisAlignment.stretch,
           children: snapshot.data.map<Widget>((item){
               // for example snapshot.data[index].activity_k will become
               // item.activity_k
               return Directionality(....);
           }).toList()
        )
     ]
  )
);

Please read about Mapping a list item StackoverFlow

edited Aug 07 '20 at 21:07

answered Aug 07 '20 at 19:06

Alok

8,452
13
55
93

Thank you too much ,it is worked correctly ,this is my firs app i working on ,i will learn many things from it ,may i have other question in future ,Best Regards – Sermed Berwari Aug 07 '20 at 19:14
I liked your work @SermedBerwari Your design is amazing. You are doing good as a starter. All the very best my friend. :) – Alok Aug 07 '20 at 19:15
but still something wrong the title and description viewd before all rows ,i just want to show int the top of first row – Sermed Berwari Aug 07 '20 at 19:16
You don't want the `title` and `aya` for every `Directionality()` @SermedBerwari ? – Alok Aug 07 '20 at 19:17
Can you share the screenshot of the latest result here please @SermedBerwari ? – Alok Aug 07 '20 at 19:18
no dear ,as show in image above ,i want them once on top or below – Sermed Berwari Aug 07 '20 at 19:18
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/219432/discussion-between-alok-and-sermed-berwari). – Alok Aug 07 '20 at 19:18
Join the chat room by clicking on the given link, we will continue the discussion there @SermedBerwari – Alok Aug 07 '20 at 19:21
Answer updated @SermedBerwari please try it and let me know, if that solves your problem :) – Alok Aug 07 '20 at 19:39
why i has been banned from asking? – Sermed Berwari Aug 09 '20 at 16:03

Can I use future builder in one page twice in flutter

1 Answers1