如何在Flutter中创建此布局？

Question

I'm re-writing my application written in Kotlin for Android to Flutter, but I am struggling to re-create layout in Flutter.

Look at this image:

This is a screenshot from the application I wrote in Native Android.

I somehow re-created this layout in Flutter, but I have problem with alignment.

This is a screenshot from my Flutter app:

I want the text "Jak używać?" to be at start, but I don't know how to do it.

If only the Container widget had "children" instead of "child", I'd know how to do it.

Can someone help me re-create the layout?

I would be extremely glad, if someone helped me!

My code (I didn't give the whole code, because there's no need to.):

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

You need to make the Text widget width the same as your screen width. Therefore, when you change the alignment of that Text widget inner text you will see a difference.

Try wrapping your Text widget with a container with the screen width:

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

Edit:

Also if the content of each tab is static page consider making them normal HTML pages and view then in the app using this flutter_html package