web-dev-qa-db-fra.com

Flutter: verticalement au centre de la colonne

Comment centrer verticalement une colonne dans Flutter? J'ai utilisé le widget "nouveau centre". J'ai utilisé le widget "nouveau centre", mais il ne centre pas verticalement ma colonne? Toutes les idées seraient utiles....

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text("Thank you"),
    ),
    body: new Center(
      child: new Column(
        children: <Widget>[
          new Padding(
            padding: new EdgeInsets.all(25.0),
            child: new AnimatedBuilder(
              animation: animationController,
              child: new Container(
                height: 175.0,
                width: 175.0,
                child: new Image.asset('assets/angry_face.png'),
              ),
              builder: (BuildContext context, Widget _widget) {
                return new Transform.rotate(
                  angle: animationController.value * 6.3,
                  child: _widget,
                );
              },
            ),
          ),
          new Text('We are glad we could serve you...', style: new TextStyle(
              fontSize: 16.0,
              fontWeight: FontWeight.w600,
              color: Colors.black87),),
          new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
          new Text('We appreciate your feedback ! !', style: new TextStyle(
              fontSize: 13.0,
              fontWeight: FontWeight.w200,
              color: Colors.black87),),
        ],
      ),
    ),
  );
}
29
Zeusox

La solution proposée par Aziz serait:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children:children,
)

Ce ne serait pas dans le centre exact à cause du rembourrage:

padding: new EdgeInsets.all(25.0),

Pour que la colonne soit exactement centrée, du moins dans ce cas, vous devrez supprimer le remplissage.

54
Zeusox

Essayer:

Column(
 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,
 children:children...)
14
aziza

Une autre solution!

Si vous souhaitez définir des widgets dans la forme verticale centrale, vous pouvez utiliser ListView pour cela. par exemple: j’ai utilisé trois boutons et les ai ajoutés dans ListView, suivi de

shrinkWrap: true -> Avec cette vue, ListView n'occupe que l'espace nécessaire.

import 'package:flutter/material.Dart';

class List extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final button1 =
        new RaisedButton(child: new Text("Button1"), onPressed: () {});
    final button2 =
        new RaisedButton(child: new Text("Button2"), onPressed: () {});
    final button3 =
        new RaisedButton(child: new Text("Button3"), onPressed: () {});
    final body = new Center(
      child: ListView(
        shrinkWrap: true,
        children: <Widget>[button1, button2, button3],
     ),
    );

    return new Scaffold(
        appBar: new AppBar(
          title: Text("Sample"),
        ),
        body: body);
  }
}    
void main() {
  runApp(new MaterialApp(
    home: List(),
  ));
}

Sortie: enter image description here

0
jitsm555