简体   繁体   中英

How to create this layout in Flutter?

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ć?')
        ],
      ),
    );
  }
}

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM