如何在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包在應用程序中查看