0
votes

Flutter: -Comment mettre la vue au centre et au bas de l'écran?

Je crée l'écran de tutoriel dans lequel les deux vues comme: - une est doit être au centre de l'écran et une autre doit au bas de l'écran.

Mais mes deux affichages ne sont pas appropriés, veuillez vérifier les images ci-dessous. J'ai fait certaines lignes du code pour le faire, mais ne pas obtenir la solution appropriée, veuillez vérifier ci-dessous le code une fois xxx

Vérifiez ci-dessus le code et laissez-moi savoir une fois.

 Entrez la description de l'image ici


4 commentaires

Vous voulez faire du widget rouge est au centre et au widget violet en bas? :'RÉ


@ Mohamedgaber couleur changera, je le crée pour la démo ou que vous pouvez dire pour un but d'apprentissage


vous voulez faire comme je le dis dans le premier commentaire ou autre chose parce que je veux poster une réponse dans votre question


Oui la même chose, je veux comme vous avez commenté en premier :)


3 Réponses :


3
votes

Utilisez ceci pour obtenir la vue requise

Stack(children: <Widget>[
      Align(alignment: Alignment.center,
      child: Container(width: 100, height: 100, color: Colors.redAccent,),),
      Align(alignment: Alignment.bottomCenter,
      child: Container(height: 100, color: Colors.purpleAccent,),)
    ],)


1 commentaires

Merci pour la saisie, vous le fera savoir bientôt, pouvez-vous ajouter une explication à ce sujet.



0
votes

mettre le conteneur bas intérieur align widget et utilisez alignement: alignement.bottomcenter .: xxx


0 commentaires

0
votes

merci @zulfiqar strong> mais il n'est pas nécessaire de mettre la vue entière à l'intérieur de la pile code> pile code> Strong> et d'utiliser le widget Aligner code> strong> propriété avec elle. Nous pouvons également utiliser le CODE> FORT> ou flexible code> strong> widget à sortir du problème.
Nous pouvons également utiliser le MediaQUERY CODE> FORT> pour celui-ci comme ci-dessous

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:page_indicator/page_indicator.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {


  @override
  void initState() {
    // TODO: implement initState

    super.initState();

  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
   return Material(
     child:Align(
         alignment: Alignment.center,
         child:Column(
           children: <Widget>[
             Container(
               height: MediaQuery.of(context).size.height*0.90,  /////HERE I USED MEDIAQUERY FOR IT
               child: PageIndicatorContainer(
                 child: PageView(
                   children: <Widget>[
                     Container(
                       color: Colors.red,
                     ),
                     Container(
                       color: Colors.yellow,
                     ),
                     Container(
                       color: Colors.blueAccent,
                     )
                   ],
                 ),
                 length: 3,
                 align: IndicatorAlign.bottom,
                 indicatorSpace: 5.0,
                 padding: EdgeInsets.all(10.0),
               ),
             ),
             Container(
               height: MediaQuery.of(context).size.height*0.10, ////HERE I USED MEDIAQUERY FOR IT
               color: Colors.purple,
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.center,
                 children: <Widget>[
                   Container(
                     child: OutlineButton(
                       onPressed: () {

                       },
                       textColor: Colors.white,
                       child: Text(
                         "Login",
                         style: TextStyle(color: Colors.white),
                       ),
                     ),
                   ),
                   Container(
                     margin: EdgeInsets.only(left: 10.0),
                     child: RaisedButton(
                       onPressed: () {},
                       color: Colors.black54,
                       child:
                       Text("SignUp", style: TextStyle(color: Colors.white)),
                     ),
                   ),
                 ],
               ),
             )

           ],

         )

     ),
   );
  }
}


0 commentaires