Блог

Сначала я хочу центрировать один виджет, а затем добавить другой виджет справа от центрального виджета. В настоящее время API-интерфейсы flutter для этого недоступны. В Android это можно легко сделать в относительной компоновке или компоновке ограничений.

Я попытался с помощью какого-то взлома с помощью MediaQuery,

 Stack(
  children: [
      Center(child: Text(17)),
      Positioned(
      bottom: 0,
      left: (screenWidth / 2)   (screenWidth / 3),
      child: Column(
          children: []
      )
  

)

Как попробовать это простым или правильным способом.

Для этого вы можете использовать Align виджет.

Пример кода

 import 'package:flutter/material.dart';

class SandBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          width: 300,
          height: 300,
          color: Colors.blue,
          child: Align(
            alignment: Alignment.centerRight, //aligns the child widget to the right center
            child: Text('17'),
          ),
        ),
      ),
    );
  }
}
  

Может быть, это поможет вам достичь того, чего вы хотите:

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        height: 30,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: Text('17'),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Container(
                width: 10,
                height: 10,
                decoration: BoxDecoration(
                  color: Colors.black,
                  shape: BoxShape.circle,
                ),
              ),
            ),
          ],
        ),
    );
  }
}
  

Или вы можете настроить его с помощью некоторых вычислений с использованием MediaQuery и Stack .
Для достижения этой цели вы можете использовать пакет badges.

Наконец, я нашел использованный https://pub.dev/packages/align_positioned

 AlignPositioned.relative(
                    Text(day.englishDate.toString(),
                        textScaleFactor: 3, style: dayTextStyle),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        ....
                      ],
                    ),
                    moveByChildWidth: 1.1,
                    minChildWidthRatio: 1,
                    moveByChildHeight: 0.3)
  

Пожалуйста, используйте Align вместе с Row .

вот простой код для достижения этой цели.

 import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Stack(
        
          children:[
                    Align(
                      child : Row( 
                        mainAxisAlignment: MainAxisAlignment.center, 
                        children:[ 
                          Padding(child: Text('Left'),padding: EdgeInsets.all(5)),
                          Text('Center widget'), 
                           Padding(child: Text('Right'),padding: EdgeInsets.all(5))
                        ]) , 
                      alignment: Alignment.center),
                 
                   ]
        ),
      ),
    );
  }
}
  

Вот результат: