如何在Flutter中创建此布局？

Question

我正在将用Kotlin for Android编写的应用程序重新编写为Flutter，但我正在努力重新在Flutter中创建布局。

看这张图：

这是我在Native Android中编写的应用程序的屏幕截图。

我以某种方式在Flutter中重新创建了此布局，但是对齐出现问题。

这是我的Flutter应用程序的屏幕截图：

我要输入“ Jakużywać”吗？ 一开始，但我不知道该怎么做。

如果只有“容器”小部件具有“子项”而不是“子项”，那么我会知道该怎么做。

有人可以帮我重新创建布局吗？

如果有人帮助我，我将非常高兴！

我的代码（我没有给出完整的代码，因为没有必要。）：

import 'package:flutter/material.dart';
import 'package:flutter_svg/flutter_svg.dart';

class HowToUse extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 16.0),
      child: Column(
        children: <Widget>[
          SvgPicture.asset('assets/icons/hamburger.svg', semanticsLabel: 'hamburger', height: 90.0,),
          SizedBox(height: 16.0),
          Text('Makdolan Flutter', style: Theme.of(context).textTheme.title),
          SizedBox(height: 16.0),
          Text('Jak używać?')
        ],
      ),
    );
  }
}

Answer 1

您需要使“ Text小部件的宽度与屏幕宽度相同。 因此，当您更改“ Text小部件内部文本的对齐方式时，您会发现有所不同。

尝试用屏幕宽度的容器包装Text小部件：

Container(
     width: MediaQuery.of(context).size.width,
     child: Text('Jak używać?', textAlign: TextAlign.start,),
)

编辑：

另外，如果每个标签的内容都是静态页面，请考虑将其设置为普通HTML页面，然后使用此flutter_html包在应用程序中查看