如何将文本居中放置在容器中间？扑

Question

我想将我的文本居中放置在我的容器中间，但它们只将它们居中放置在容器的顶部中间。这是我的代码：

import 'package:flutter/material.dart';

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: Column(
            children: <Widget>[
              Container(
                margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,

                child: const Text('BLE & Data'),
              ),
              //const SizedBox(height: 10),
              Container(
                margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,
                child: const Text('Statistiken',
                  textAlign: TextAlign.center,),
              ),
              const SizedBox(height: 10),
                Container(
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                height: 100,
                width: 300,
                color: Colors.green,
                child: const Text('Personal Data',
                  textAlign: TextAlign.center,
                  ),
              ),
            ],
          ),
        ));
  }
}

这就是我的输出：Demo

如果有人能解决我的问题，我将不胜感激

Answer 1

将您想要的任何内容包裹在 Center 小部件中：

例如：

Container(
            margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
            height: 100,
            width: 300,
            color: Colors.green,

            child: Center( child: const Text('BLE & Data') ),
          ),

Answer 2

您只需要用中心小部件包裹您的文本小部件。

Center(child:Text("")),

添加此代码：-

class Homepage extends StatefulWidget {
  const Homepage({Key? key}) : super(key: key);

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(child: Text('BLE & Data')),
                ),
                //const SizedBox(height: 10),
                Container(
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(
                    child: Text(
                      'Statistiken',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
                const SizedBox(height: 10),
                Container(
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Center(
                    child: Text(
                      'Personal Data',
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

Answer 3

使用 container() 小部件的 alignment : Alignment.center。

class Homepage extends StatefulWidget {
  const Homepage({Key key}) : super(key: key);

  @override
  _HomepageState createState() => _HomepageState();
}

class _HomepageState extends State<Homepage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('Homepage'),
          backgroundColor: Colors.green,
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.fromLTRB(75, 100, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text('BLE & Data'),
                ),
                //const SizedBox(height: 10),
                Container(
                  alignment: Alignment.center,
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text(
                    'Statistiken',
                    textAlign: TextAlign.center,
                  ),
                ),
                const SizedBox(height: 10),
                Container(
                  alignment: Alignment.center,
                  //padding: EdgeInsets.all(50),
                  margin: EdgeInsets.fromLTRB(75, 25, 75, 100),
                  height: 100,
                  width: 300,
                  color: Colors.green,
                  child: const Text(
                    'Personal Data',
                    textAlign: TextAlign.center,
                  ),
                ),
              ],
            ),
          ),
        ));
  }
}

如何将文本居中放置在容器中间？扑

How to center the Text in the middle of the Container? Flutter

containers

dart

flutter