Flutter: Kolom tengah vertikal

Bagaimana cara memusatkan kolom secara vertikal di Flutter? Saya telah menggunakan widget "Pusat baru". Saya telah menggunakan widget "New Center", tetapi widget tidak memusatkan kolom secara vertikal? Ide apa pun akan membantu ....

@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),),
        ],
      ),
    ),
  );
}

Solusi yang diajukan oleh Aziz adalah:

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

Itu tidak akan berada tepat di tengah karena bantalan:

padding: new EdgeInsets.all(25.0),

Untuk membuat Kolom tengah dengan tepat - setidaknya dalam kasus ini - Anda perlu menghapus bantalan.

Mencoba:

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

Dengan Kolom, gunakan:

mainAxisAlignment: MainAxisAlignment.center

Ini menyelaraskan anak-anaknya ke pusat Space induknya secara vertikal

Anda mengontrol bagaimana baris atau kolom meratakan turunannya menggunakan properti mainAxisAlignment dan crossAxisAlignment. Untuk satu baris, sumbu utama vertikal dan sumbu silang vertikal. Untuk kolom, sumbu utama vertikal dan sumbu silang horizontal.

 mainAxisAlignment: MainAxisAlignment.center,
 crossAxisAlignment: CrossAxisAlignment.center,

Coba yang ini. Itu berpusat secara vertikal dan horizontal.

Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: children,
  ),
)

Solusi Lain!

Jika Anda ingin mengatur widget dalam bentuk vertikal tengah, Anda dapat menggunakan ListView untuk itu. misalnya: Saya menggunakan tiga tombol dan menambahkannya ke dalam ListView yang diikuti oleh

shrinkWrap: true -> Dengan ListView ini hanya menempati ruang yang dibutuhkan.

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(),
  ));
}

Keluaran:

Bagi saya masalahnya adalah ada Diperluas di dalam kolom yang harus saya hapus dan berhasil.

Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Expanded( // remove this
              flex: 2,
              child: Text("content here"),
            ),
          ],
        )

Anda bisa menggunakan. mainAxisAlignment:MainAxisAlignment.center Ini akan bahan melalui tengah di kolom bijaksana. `crossAxisAlignment: CrossAxisAlignment.center 'Ini akan menyelaraskan item di tengah dalam baris.

Container( alignment:Alignment.center, Child: Column () )

Cukup gunakan. Center ( Child: Column () ) atau rap dengan widget Padding. Dan sesuaikan Padding seperti kolom anak di tengah.