Can I use future builder in one page twice in flutter - 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()),
);
}
}

Answer 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