Flutter: Positioning images in flutter

Question

I just started learning flutter of some tutorials, but I have one thing i want to archive. I have problem with positioning images in my code. This is the issue.

.

If someone can recode this because I'm trying 2 days and can't understand how it works.

Solution I'm trying to find is to position image under logo into top right corner without moving logo and textbars

Draft of my wanting:

My codes:

main.dart

import 'package:flutter/material.dart';
import 'package:kafe/screens/login_screen.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: 'Email and Password Login',
      theme: ThemeData(
        primarySwatch: Colors.brown,
      ),
      home: LoginScreen(),
    );
  }
}

login_screen.dart

import 'package:flutter/material.dart';
 
class LoginScreen extends StatefulWidget {
  const LoginScreen({ Key? key }) : super(key: key);
 
  @override
  _LoginScreenState createState() => _LoginScreenState();
}
 
class _LoginScreenState extends State<LoginScreen> {
 // form key
 final _formKey = GlobalKey<FormState>();
 
 // Editing Controller
final TextEditingController emailController = new TextEditingController();
final TextEditingController passwordController = new TextEditingController();
final TextEditingController locationController = new TextEditingController();
 
  @override
  Widget build(BuildContext context) {
 
    //Name field
    final emailField = TextFormField(
      autofocus: false,
      controller: emailController,
      keyboardType: TextInputType.emailAddress,
    //validator: {} {},
    onSaved: (value)
    {
        emailController.text = value!;
 
    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.account_circle_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашето име",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );
 
    //password field
    final passwordField = TextFormField(
      autofocus: false,
      controller: passwordController,
    //validator: {} {},
    onSaved: (value)
    {
        passwordController.text = value!;
 
    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.call_end_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашиот телефонски број",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );
 
    //Location field
    final locationField = TextFormField(
      autofocus: false,
      controller: locationController,
 
    //validator: {} {},
    onSaved: (value)
    {
        locationController.text = value!;
 
    },
    textInputAction: TextInputAction.done,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.add_location_alt_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашата локација",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
 
      ),
    )),
 
    // button
 
   loginButton = Material(
    elevation: 5,
    borderRadius: BorderRadius.circular(30),
    color: Colors.redAccent,
    child: MaterialButton(
      padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      minWidth: MediaQuery.of(context).size.width,
      onPressed: () {},
      child: Text(
        "Логирање", 
      textAlign: TextAlign.center, 
      style: TextStyle(fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.bold,
       ),
      ),
    ),
  );        
 
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            color: Colors.white,
            child: Padding(
              padding: const EdgeInsets.all(35.0),
              child: Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget> [
 
                    SizedBox(
                      width: 130,
 
                      child: SizedBox(
                        child: Image.asset("assets/top.png",
                        fit: BoxFit.contain,
                        ),
                        ),
                    ),
 
 
 
                    SizedBox(
                      height: 250,
 
                      child: Image.asset(
                        "assets/logo.png",
 
                      fit: BoxFit.contain,
                      )
                    ),
 
 
 
 
 
                    emailField,
                    SizedBox(height: 30),
 
                    passwordField,
                    SizedBox(height: 30),
 
                    locationField,
                    SizedBox(height: 30),
                    loginButton,
                    SizedBox(height: 30),
                  ],
                ),
 
              ),
            ),
          ),
        ) ,
      ),
    );
  }
}

Answer 1

On your widget tree, the logo.png is placed after top.png image, It's an order issue, place logo as 1st child on Column

     crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    SizedBox(
                      height: 250,
                      child: Image.asset(
                        "assets/logo.png",
                        fit: BoxFit.contain,
                      ),
                    ),
                    SizedBox(
                      width: 130,
                      child: Image.asset(
                        "assets/top.png",
                        fit: BoxFit.contain,
                      ),
                    ),

But next image describe you like to position the image. For this, wrap SizedBox with Align widget.

Align(
  alignment: Alignment.topLeft,
  child: SizedBox(
    width: 130,

Also, I would prefer Stack in this case.

Answer 2

you can try postioned or align and go play with it. but you need them to wrap by stack

          Stack(
            color: Colors.white,
            child:  Form(
                key: _formKey,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget> [
 
                    Positioned(
                      left:0,top:0
                      child: SizedBox(
                      width: 130,
 
                      child: SizedBox(
                        child: Image.asset("assets/top.png",
                        fit: BoxFit.contain,
                        ),
                        ),
                            ),
                              ),
              Align(
               alignment: Alingment.center,
               child: Column(
                children: [
                    SizedBox(
                      height: 250,
 
                      child: Image.asset(
                        "assets/logo.png",
 
                      fit: BoxFit.contain,
                      )
                    ),
 
 
 
 
 
                    emailField,
                    SizedBox(height: 30),
 
                    passwordField,
                    SizedBox(height: 30),
 
                    locationField,
                    SizedBox(height: 30),
                    loginButton,
                    SizedBox(height: 30),
                  ]
               )
                 ),
 
 
 
                    
                  ],
                ),
 
              ),
            ),
          ),