Блог

Я думал о том, как сделать этот простой макет:

Решение, которое я придумал, выглядит так:

 import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Container(
                color: Colors.red,
                padding: const EdgeInsets.all(8.0),
                height: 75,
                width: 75,
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('App name'),
              ),
            ],
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('Copyright'),
            ),
          ),
        ],
      ),
    );
  }
}
  

Но я не уверен, есть ли более элегантный способ центрировать «Изображение логотипа» (красный контейнер) с «текстом названия приложения» под ним, и в то же время в нижней части экрана «Текст авторского права».

Я пытался создать макет с помощью виджета столбца, но виджет выравнивания не вносит никаких изменений в положение «текста авторского права»:

 import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              color: Colors.red,
              padding: const EdgeInsets.all(8.0),
              height: 75,
              width: 75,
            ),
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text('App name'),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Padding(
                padding: const EdgeInsets.all(8.0),
                child: Text('Copyright'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
  

Это дает мне следующий результат:

Итак… Есть ли лучший способ создать этот макет заставки? Может быть, есть виджет, который подходит для тех случаев, когда вы хотите разместить элементы как в центре, так и в нижней части экрана.

Используйте позиционированный макет вне столбца, но внутри стека следующим образом:

 Positioned( bottom:0,
            child: Align( alignment: Alignment.center, 
                       child:Text("Copyright"))
)
  

если вы хотите просто использовать столбец без стека, вы можете поместить два контейнера в столбец и обернуть их в развернутый виджет, как показано в приведенном ниже коде:

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Expanded(
            child: Container(),
          ),
          Container(
            color: Colors.red,
            padding: const EdgeInsets.all(8.0),
            height: 75,
            width: 75,
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('App name'),
          ),
          Expanded(
            child: Container(),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Text('Copyright'),
          ),
        ],
      ),
    );