Je veux une image d'arrière-plan et au-dessus de cette image, il y aura du contenu qui devrait pouvoir faire défiler verticalement afin de ne pas sortir de l'image.
Le code est affiché ci-dessous
J'utilise le satck et un enfant sont Image et l'autre est listview pour y parvenir mais toujours pas en mesure de trouver la bonne solution ..
ListView(
children: <Widget>[
new Stack(
children: <Widget>[
Container(
child: background.Row3
),
Stack(
children: <Widget>[
Center(child: SvgPicture.asset('assets/Receipt.svg',height: 350,width: 200,),),/*************this is the main background image****************/
Padding(padding: EdgeInsets.only(top:100),
child: Column(
mainAxisAlignment:MainAxisAlignment.spaceAround,
children: <Widget>[
ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[ /********text above background image *******************/
Center(
child:Text('Beneficiary Details',style: TextStyle(fontSize: 14,color: Colors.black),)
),
Center(
child:Text('Sushita sen',style: TextStyle(fontSize: 12,color: Colors.grey),)
),
Center(
child:Text('Reference Number',style: TextStyle(fontSize: 14,color: Colors.black),)
),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
Center(
child:Text('73YHNUWD6EW7R34Y78HSDIF',style: TextStyle(fontSize: 12,color: Colors.grey),)
,),
],
)
],
)
,)
],
)
],
)
]
),
),
),
],
),
);
}
}
3 Réponses :
@kriti sharma pour l'image d'arrière-plan dans le widget Stack veuillez utiliser Positoned un widget> au-dessus du widget Stack. exemple: - children: <Widget>[
Positioned(
top: 0,
right: 0,
child: Image.asset(
"assets/icons/categories/map.jpg",
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
),
),
// _buildGoogleMap(context),
// _zoomminusfunction(),
// _zoomplusfunction(),
// _buildContainer(),
],
),
et utilisez le widget ListTile à l'intérieur du ListView au lieu du centre ... ListTile Deatils: - api .flutter.dev / flutter / material / ListTile-class.html
En fait, ce n'est pas un écran noir que vous avez une erreur comme,
Exception interceptée par la bibliothèque de rendu Le suivant assertion a été lancée pendant performResize ():
La fenêtre verticale a une hauteur illimitée.
Je viens d'ajouter scrollDirection et shrinkWrap dans votre liste.
home: ListView(children: <Widget>[
new Stack(
children: <Widget>[
Container(child: Text("Hello")),
Stack(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
image: DecorationImage(
image: new NetworkImage(
"https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
fit: BoxFit.fill)),
),
/*************this is the main background image****************/
Padding(
padding: EdgeInsets.only(top: 100),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Center(
child: Text(
'Beneficiary Details',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'Sushita sen',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'Reference Number',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
],
)
],
),
)
],
)
],
)
]),
);
Tout votre code
ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
Cela ne fonctionne toujours pas de la même manière. Il ne fait pas défiler verticalement à l'intérieur de la liste si j'augmente les données .... Je veux savoir pourquoi il ne défile pas ... J'ai déjà ajouté le code que vous avez suggéré alors aussi ....
Vous voulez dire si j'ajoute plus de 50 textes (). il ne défile pas à droite?
en fait, je ne sais pas ce que vous essayez réellement d'archiver, faites cette liste unique? qu'est-ce que vous utilisez Stack et Two time ListView?
Je voulais l'image en arrière-plan et au-dessus du texte qui devrait pouvoir faire défiler verticalement et qui s'enroulerait autour de la hauteur de l'image ......... signifie qu'il ne doit pas déborder de l'image
J'ai eu la réponse en fait, je dois mettre cette liste dans un conteneur en donnant une hauteur fixe après cela, je pourrai faire défiler.Merci beaucoup vous avez partiellement résolu mon problème :)
oui, c'est partiellement résolu, il y a des widgets indésirables.
Ya je vais l'optimiser
Je le corrige en plaçant ListView dans le conteneur
home: ListView(children: <Widget>[
new Stack(
children: <Widget>[
Container(child: Text("Hello")),
Stack(
children: <Widget>[
Container(
height: 100,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: Colors.blue,
image: DecorationImage(
image: new NetworkImage(
"https://thumbs.dreamstime.com/b/funny-face-baby-27701492.jpg"),
fit: BoxFit.fill)),
),
/*************this is the main background image****************/
Padding(
padding: EdgeInsets.only(top: 100),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Conatiner( /************This container will wrap the listview and will make it scrollable also *******/
height:200,
child: ListView(
scrollDirection: Axis.vertical,
shrinkWrap: true,
padding: const EdgeInsets.all(8),
children: <Widget>[
Center(
child: Text(
'Beneficiary Details',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'Sushita sen',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'Reference Number',
style:
TextStyle(fontSize: 14, color: Colors.black),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
)),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
Center(
child: Text(
'73YHNUWD6EW7R34Y78HSDIF',
style:
TextStyle(fontSize: 12, color: Colors.grey),
),
),
],
)
)
],
),
)
],
)
],
)
]),
);
Pourquoi avez-vous utilisé stack comme parent dans ListView? Est-ce une exigence ou vous essayez simplement d'afficher la liste.?