I am using Flutter 2.8, as many package dont yet have support for latest flutter version. I am using stack instead of appBar. and I want to get the look as of below picture.

I dont want to use stack in the whole page, i think it will cause performance issues. Also, If i use stack only in lieu of appBar, I can copy paste this code to make that home button on top-left corner, for another app.

here is my full code of this page:

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child : Scaffold(
        //todo: 1. copy code from getx4 cool ui app
        //todo: 1. make it as he made it

        body: Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Color(0xFFc5e5f3),
                child: Stack(
                  children: [
                    Positioned(
                        top: 10,
                        left: 5,
                        child: IconButton(
                          onPressed: () {},
                          icon: Icon(Icons.home),
                        )),
                  ],
                ),
              ),
            ),
            Expanded(
              flex: 10,
              child: Padding(
                padding: const EdgeInsets.all(15.0),
                child: Row(
                  children: [
                    Expanded(child: Text('ShopX', style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold) ,)),
                    Padding(
                      padding: const EdgeInsets.only(right: 8) ,
                      child: Icon(Icons.format_list_bulleted ),
                    ),
                    Icon(Icons.grid_view_outlined ),
                  ],
                ),
              ),
            ),
          ],
        ),

      ),
    );
  }
}

CodePudding user response：

You need to use Align widget with a property like alignment: FractionalOffset.topCenter . Please see the sample code below:

Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Column(
            children: [
              Container(
                padding: EdgeInsets.only(top: 8.0, bottom: 8.0),
                color: Colors.black,
                  child: Image(image: AssetImage('assets/image.png'), width: MediaQuery.of(context).size.width, height: 50,)),
              Expanded(
                flex: 1,
                  child: Align(
                    alignment: FractionalOffset.topCenter,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                      ),
                    child: Padding(
                      padding: const EdgeInsets.fromLTRB(35, 12, 0, 12),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: const [
                          Image(image: AssetImage('assets/image.png'), width: 120, alignment: Alignment.bottomLeft,),
                          Image(image: AssetImage('assets/image.png'), width: 100, alignment: Alignment.bottomLeft,),
                          Image(image: AssetImage('assets/image.png'), width: 100, height: 40, alignment: Alignment.bottomLeft,),
                        ],
                      ),
                    ),),),
              ),
            ],
          ),
        ],
      ),

This sample code adds images 4 images on top center of the screen. 1 image on the top of the screen 3 images below the top image

Moreover, you can directly put your Stack widget into the body of Scaffold.

CodePudding user response：

Use crossAxisAlignment: CrossAxisAlignment.start, on Row. Default is center.

Expanded(
  flex: 10,
  child: Padding(
    padding: const EdgeInsets.all(15.0),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start, //this
      children: [
        Expanded(
            child: Text(
          'ShopX',
          style:
              TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
        )),