Stack item are not positioned when the screen size changes Flutter

Viewed 39

1-I am making a simple app where I am creating Profile section Where there is Stack at the top with two widgets but the problem is when ever I test the app on different screen sizes the Stack item widgets are not at same position even i tried with MediaQuery

2-And the Second issue is I want the Circle Avatar to be place Half inside the Container And Half Out-side the Container.

Here is my Profile.dart class

    class SettingsScreen extends StatelessWidget {
  const SettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
      child: Column(
        children: <Widget>[
          Stack(
            children: <Widget>[
              Container(
// height: mediaQueryData.size.height * 0.4,
                height: 300,
                width: double.infinity,
                decoration: const BoxDecoration(
                    gradient: LinearGradient(colors: [
                      Colors.black,
                      Color.fromRGBO(255, 243, 18, 3),
                    ], begin: Alignment.topLeft, end: Alignment.bottomRight),
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(50),
                        bottomRight: Radius.circular(50))),
              ),
              const Padding(
                padding: EdgeInsets.only(top: 240, left: 140),
                child: CircleAvatar(
                  backgroundColor: Color.fromARGB(183, 40, 46, 3),
                  radius: 50,
                  child: Text(
                    "M-E",
                    style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                        fontSize: 32),
                  ),
                ),
              ),

              Positioned(
                top: 110,
                left: 40,
                child: Text(
                  "مثابة ايلاف",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 70),
                ),
              ),
              //),
            ],
          ),
          Column(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(top: 0),
                child: ListTile(
                  trailing: const Icon(
                    Icons.cast_for_education,
                    color: Colors.black,
                  ),
                  title: const Text(
                    "Subjects  (مضامین)",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  onTap: () {},
                ),
              ),
              const Divider(
                color: Colors.black,
                thickness: 0.5,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 2),
                child: ListTile(
                  trailing: const Icon(
                    Icons.contacts,
                    color: Colors.black,
                  ),
                  title: const Text(
                    "Contact  (رابطہ )",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  onTap: () {},
                ),
              ),
              const Divider(
                color: Colors.black,
                thickness: 0.5,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 2),
                child: ListTile(
                  trailing: const Icon(
                    Icons.settings,
                    color: Colors.black,
                  ),
                  title: const Text(
                    "Setting (ترتیبات)",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  onTap: () {},
                ),
              ),
              const Divider(
                color: Colors.black,
                thickness: 0.5,
              ),
              Padding(
                padding: const EdgeInsets.only(top: 2),
                child: ListTile(
                  trailing: const Icon(
                    Icons.logout,
                    color: Colors.black,
                  ),
                  title: const Text(
                    "Logout (لاگ آوٹ)",
                    style: TextStyle(
                        color: Colors.black,
                        fontWeight: FontWeight.bold,
                        fontSize: 18),
                  ),
                  onTap: () {},
                ),
              ),
            ],
          ),
        ],
      ),
    ));
  }
}

Here is the const result I want when the app run on different devices enter image description here

Here is the result I don't want to be happens whenever the device size changes

enter image description here

1 Answers

Use this structure.

Positioned(
                top: 110,
                left: 1,
                right:1
                child: Text(
                  "مثابة ايلاف",
                  style: TextStyle(
                      color: Colors.black,
                      fontWeight: FontWeight.bold,
                      fontSize: 70),
                ),
              ),
Related