I've been trying things out for a while and finally got my Stack aligned and positioned the way I want. Now I'm having trouble with the positioning; not sure if its due to some misplaced alignment parameters. The stack should have the photo appropriately placed on the left without going over the elevated button.

Center(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Stack(
                              alignment: Alignment.center,
                              children: [
                                ElevatedButton(
                                style: ButtonStyle(
                                backgroundColor: MaterialStateProperty.all(Colors.amberAccent),),
                                        onPressed: () {
                                          Navigator.of(context).pushNamed("/widget");
                                          WebView.player = adAddresses.isEmpty == true
                                              ? 'https://myfavkpop-shop.myshopify.com/'
                                              : adAddresses[adIndex].toString();
                                          WebView.webviewTitle = 'MyFavKPop Shopping';
                                        },
                                        child: Column(
                                          children: [
                                            Padding(padding:  EdgeInsets.all(3.0)),
                                            Row(
                                              mainAxisAlignment: MainAxisAlignment.center,
                                              mainAxisSize: MainAxisSize.min,
                                              children: <Widget>[
                                                SizedBox(width: 70,),
                                                new Flexible(
                                                  fit: FlexFit.loose,
                                                  child: new Text(
                                                    adTitles.isEmpty == true
                                                        ? 'MyFavKPop Shop'
                                                        : adTitles[adIndex],
                                                    softWrap: true,
                                                    maxLines: 3,
                                                    textScaleFactor: 0.8,
                                                    style: TextStyle(
                                                        color: Colors.black,
                                                        fontSize: 35.00,
                                                        fontFamily: 'Chewy'),
                                                    textAlign: TextAlign.center,
                                                  ),
                                                ),
                                                Padding(padding:  EdgeInsets.all(5.0)),
                                                Image.asset('assets/ad.jpg',
                                                scale: 35,)
                                              ],
                                            ),
                                            Padding(padding:  EdgeInsets.all(3.0)),
                                          ],
                                        )
                                      ),
                                Positioned(
                                  //top: 20,
                                  //left: 80,
                                  child: CircleAvatar(
                                      radius: 50.0,
                                      backgroundImage: new NetworkImage(adImages
                                                  .isEmpty ==
                                              true
                                          ? 'https://cdn.shopify.com'
                                          : adImages[adIndex])),
                                )
                              ],
                            )
                          ],
                        ),
                      ),

CodePudding user response：

You wrote: alignment: Alignment.center, for the Stack. So any non-positioned children would align to the center.

You can change the Stack alignment property to: alignment: Alignment.centerLeft.

Alternatively, you can change the parent Positioned widget, of your CircleAvatar, to say something like left: 20.

CodePudding user response：

So what i think you should no use the elevated button as it is not customisable, you can rather use the gesture detector with child as a container where you can decorate it as per your needs. and then you can add a row for container so that you can have a image first and then the text. I have just added rough sketch you can customise it as per your needs.

As i am still confused that you want the image inside the button or to the left of the button.

Check out the example that i have created :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              CircleAvatar(
                radius: 50.0,
                backgroundImage: NetworkImage('https://cdn.shopify.com'),
              ),
              // here you can have your elevated button.
              GestureDetector(
                onTap: () {
                  /// Do your on press evernts over here.
                },
                child: Container(
                  decoration: BoxDecoration(
                    color: Colors.amberAccent,
                  ),
                  padding: EdgeInsets.all(5.0),
                  child: Flexible(
                    fit: FlexFit.loose,
                    child: new Text(
                      'MyFavKPop Shop',
                      softWrap: true,
                      maxLines: 3,
                      textScaleFactor: 0.8,
                      style: TextStyle(
                          color: Colors.black,
                          fontSize: 35.00,
                          fontFamily: 'Chewy'),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}