1. minimal code

screens/login.dart

                    @override
                    Widget build(BuildContext context) {
                      return MaterialApp(
                        debugShowCheckedModeBanner: false,
                        title: 'Flutter Demo',
                        home: Scaffold(
                          backgroundColor: Colors.yellow,
                          body: SafeArea(
                              child: Column(

                              )
                          ),
                        ),
                      );
                    }

Output

2. show app bar

add app bar

appBar: AppBar(title: const Text("My App Title")),

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),  // added new line
        body: SafeArea(
            child: Column(

            )
        ),
      ),
    );
  }

output

3. add children for adding multiple widgets

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("Update Store Name")),
        body: SafeArea(
            child: Column(
                  children: [

                  ]
            )
        ),
      ),
    );
  }

4. add multiple widgets

Let us add textfield

                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      fillColor: Colors.white,
                      filled: true,
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),

                

  
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [
                 

                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      fillColor: Colors.white,
                      filled: true,
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),


                  TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                      border: OutlineInputBorder(),
                      fillColor: Colors.white,
                      filled: true,
                      labelText: 'Password',
                      hintText: 'Enter Password',
                    ),
                  ),


                ]
            )
        ),
      ),
    );
  }

We added two child widgets RoundedInput

output

5. apply sorrounding paddings

1. padding: EdgeInsets.all(24), is applied for padding

2. padding: parameter is not member of Column() or children()

3. So we need to use Container() or Padding()

let us add container() or padding()

Container(

),
Padding(
  padding: EdgeInsets.all(24),


),

  
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [


                  Container(
                    
                  ),
                  Padding(
                    padding: EdgeInsets.all(24),
                   
                  ),



                ]
            )
        ),
      ),
    );
  }

Next let us add textfields into the container() or padding()

  
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [

                  Container(                   
                    child: TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Username',
                          hintText: 'Enter Username',
                        ),
                      ),
                  ),

                  Padding(
                    padding: EdgeInsets.all(15),
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                        hintText: 'Enter Password',
                      ),
                    ),
                  ),


                  

                ]
            )
        ),
      ),
    );
  }

added Container() and Padding()

output

Note that, First inputbox doesn't have padding. But second have padding

Let us add padding to container()

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [

                  Container(
                    padding: EdgeInsets.all(15), // added new line
                    child: TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Username',
                          hintText: 'Enter Username',
                        ),
                      ),
                  ),
                  
                  Padding(
                    padding: EdgeInsets.all(15),
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                        hintText: 'Enter Password',
                      ),
                    ),
                  ),


                 

                ]
            )
        ),
      ),
    );
  }

output

6. Add button

Let us add button

  
ElevatedButton(
        onPressed: () {

        },
        child: Text('Save'),
),

complete code

@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [

                  Container(
                    padding: EdgeInsets.all(15), // added new line
                    child: TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Username',
                          hintText: 'Enter Username',
                        ),
                      ),
                  ),
                  
                  Padding(
                    padding: EdgeInsets.all(15),
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                        hintText: 'Enter Password',
                      ),
                    ),
                  ),


                  ElevatedButton(
                    onPressed: () {

                    },
                    child: Text('Save'),
                  ),

                ]
            )
        ),
      ),
    );
  }

output

7. two col widgets

Let us add two buttons

Row(
                      children: [
                        ElevatedButton(
                          onPressed: () {

                          },
                          child: Text('New Account'),
                        ),
                        ElevatedButton(
                          onPressed: () {

                          },
                          child: Text('Login'),
                        ),
                      ]

                  )



                      

Complete code

  
@override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: Scaffold(
        backgroundColor: Colors.yellow,
        appBar: AppBar(title: const Text("My App Title")),
        body: SafeArea(
            child: Column(
                children: [

                  Container(
                    padding: EdgeInsets.all(15), // added new line
                    child: TextField(
                        obscureText: true,
                        decoration: InputDecoration(
                          border: OutlineInputBorder(),
                          labelText: 'Username',
                          hintText: 'Enter Username',
                        ),
                      ),
                  ),
                  
                  Padding(
                    padding: EdgeInsets.all(15),
                    child: TextField(
                      obscureText: true,
                      decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                        hintText: 'Enter Password',
                      ),
                    ),
                  ),


                  ElevatedButton(
                    onPressed: () {

                    },
                    child: Text('Save'),
                  ),

                  Row(
                      children: [
                        ElevatedButton(
                          onPressed: () {

                          },
                          child: Text('New Account'),
                        ),
                        ElevatedButton(
                          onPressed: () {

                          },
                          child: Text('Login'),
                        ),
                      ]

                  )

                ]
            )
        ),
      ),
    );
  }

output

Alignment of above buttons are not good

Let us add Expanded widget for showing the button in full width of screen

Row(
                      children: [

                        Expanded(
                          child:ElevatedButton(
                            onPressed: () {

                            },
                            child: Text('New Account'),
                          ),
                        ),

                        Expanded(
                          child:ElevatedButton(
                            onPressed: () {

                            },
                            child: Text('New Account'),
                          ),
                        ),



                      ]

                  )

                      

output

Note that , No spacing between the buttons

Let us add SizedBox(width: 50), for spacing

Row(
                      children: [
                        SizedBox(width: 50),
                        Expanded(
                          child:ElevatedButton(
                            onPressed: () {

                            },
                            child: Text('New Account'),
                          ),
                        ),
                        SizedBox(width: 50),
                        Expanded(
                          child:ElevatedButton(
                            onPressed: () {

                            },
                            child: Text('New Account'),
                          ),
                        ),
                        SizedBox(width: 50),


                      ]

                  )

                      

output

Step 1: screen padding & gradiant

              body: SafeArea(
              child: Container(
                  padding: EdgeInsets.all(30),
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      begin: Alignment.topCenter,
                      end: Alignment.bottomCenter,
                      colors: [
                        Colors.green,
                        Colors.blue,
                      ],
                    ),
                  ),
                  

              )
          ),

        

Step 2: add child element to the Container

        child: Column(
                    children: [

                      ]
        )
                    

Step 3: add child elements

                      SizedBox(height: 20),

                      Image.asset(
                        'assets/logo.png', // Adjust the path to your Flutter logo image
                        width: 250, // Adjust the width as needed
                        height: 150, // Adjust the height as needed
                      ),

                      Container(
                        child: TextField(
                          
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.yellow),
                            ),
                            labelText: 'Username',
                            hintText: 'Enter Username',
                          ),
                          style: TextStyle(color: Colors.white),
                        ),
                      ),

                      SizedBox(height: 20),

                      Container(
                        child: TextField(
                          obscureText: true,
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.yellow),
                            ),
                            labelText: 'Password',
                            hintText: 'Enter Password',
                          ),
                          style: TextStyle(color: Colors.white),
                        ),
                      ),



                      Row(
                          children: [

                            SizedBox(width: 0),
                            Expanded(
                              child:TextButton(
                                style: TextButton.styleFrom(
                                  textStyle: const TextStyle(fontSize: 15),
                                ),
                                onPressed: () {},
                                child: const Text('New account', style: TextStyle(fontSize: 15, color: Colors.white )),
                              ),
                            ),
                            SizedBox(width: 20),
                            Expanded(
                              child:TextButton(
                                style: TextButton.styleFrom(
                                  textStyle: const TextStyle(fontSize: 15),

                                ),
                                onPressed: () {},
                                child: const Text('Forgot Password', style: TextStyle(fontSize: 15, color: Colors.white )),
                              ),
                            ),
                            SizedBox(width: 0),


                          ]

                      ),


                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.red,
                          minimumSize: const Size.fromHeight(40), // NEW
                        ),
                        onPressed: () {},
                        child: const Text(
                          'Login',
                          style: TextStyle(fontSize: 18, color: Colors.white, ),
                        ),
                      ),

                    

Complete code

    body: SafeArea(
            child: Container(
                padding: EdgeInsets.all(30),
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      Colors.green,
                      Colors.blue,
                    ],
                  ),
                ),
                child:Column(

                    children: [
                      
                      SizedBox(height: 20),

                      Image.asset(
                        'assets/logo.png', // Adjust the path to your Flutter logo image
                        width: 250, // Adjust the width as needed
                        height: 150, // Adjust the height as needed
                      ),

                      Container(
                        child: TextField(
                          
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.yellow),
                            ),
                            labelText: 'Username',
                            hintText: 'Enter Username',
                          ),
                          style: TextStyle(color: Colors.white),
                        ),
                      ),

                      SizedBox(height: 20),

                      Container(
                        child: TextField(
                          obscureText: true,
                          decoration: InputDecoration(
                            enabledBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.white), //<-- SEE HERE
                            ),
                            focusedBorder: OutlineInputBorder(
                              borderSide: BorderSide(width: 1, color: Colors.yellow),
                            ),
                            labelText: 'Password',
                            hintText: 'Enter Password',
                          ),
                          style: TextStyle(color: Colors.white),
                        ),
                      ),



                      Row(
                          children: [

                            SizedBox(width: 0),
                            Expanded(
                              child:TextButton(
                                style: TextButton.styleFrom(
                                  textStyle: const TextStyle(fontSize: 15),
                                ),
                                onPressed: () {},
                                child: const Text('New account', style: TextStyle(fontSize: 15, color: Colors.white )),
                              ),
                            ),
                            SizedBox(width: 20),
                            Expanded(
                              child:TextButton(
                                style: TextButton.styleFrom(
                                  textStyle: const TextStyle(fontSize: 15),

                                ),
                                onPressed: () {},
                                child: const Text('Forgot Password', style: TextStyle(fontSize: 15, color: Colors.white )),
                              ),
                            ),
                            SizedBox(width: 0),


                          ]

                      ),


                      ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          primary: Colors.red,
                          minimumSize: const Size.fromHeight(40), // NEW
                        ),
                        onPressed: () {},
                        child: const Text(
                          'Login',
                          style: TextStyle(fontSize: 18, color: Colors.white, ),
                        ),
                      ),



                    ]
                )

            )
        ),
      ),


    

              import 'package:flutter/material.dart';
import 'package:vera/controllers/login_controller.dart';
import 'package:get/get.dart';

class LoginPage extends StatelessWidget {
  @override

  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      builder: (controller) => Scaffold(

        
        body: GridView.count(
          crossAxisCount: 2, // 2 columns
          children: List.generate(items.length, (index) {
            return Card(
              child: Center(
                child: Text(
                  items[index],
                  style: TextStyle(fontSize: 24.0),
                ),
              ),
            );
          }),
        ),



      )
    );
  }
}





              

              import 'package:flutter/material.dart';
import 'package:vera/controllers/login_controller.dart';
import 'package:get/get.dart';

class LoginPage extends StatelessWidget {
  @override

  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
  ];

  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
      builder: (controller) => Scaffold(

        body: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            crossAxisSpacing: 4.0,
            mainAxisSpacing: 4.0,
          ),
          itemCount: items.length,
          itemBuilder: (context, index) {
            return Stack(
              children: [
                Card(
                  child: Center(
                    child: Text(
                      items[index],
                      style: TextStyle(fontSize: 24.0),
                    ),
                  ),
                ),
                Positioned(
                  top: 0,
                  right: 0,
                  child: IconButton(
                    icon: Icon(Icons.favorite_border),
                    onPressed: () {
                      // Handle icon tap
                    },
                  ),
                ),
              ],
            );
          },
        ),


      )
    );
  }
}

              import 'package:flutter/material.dart';
import 'package:vera/controllers/login_controller.dart';
import 'package:get/get.dart';

class LoginPage extends StatelessWidget {
  @override

  final List<String> items = [
    'Item 1',
    'Item 2',
    'Item 3',
    'Item 4',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5',
    'Item 5', 'Item 5', 'Item 5', 'Item 5',



  ];

  Widget build(BuildContext context) {
    return GetBuilder<LoginController>(
        builder: (controller) => Scaffold(

            body: ListView.builder(
              itemCount: items.length,
              itemBuilder: (context, index) {
                
                
                return Card(
                 child: ListTile(
                    leading: Icon(Icons.star), // Icon on the left
                    title: Text(items[index]), // Text content
                    trailing: IconButton(
                      icon: Icon(Icons.favorite_border), // Icon on the right
                      onPressed: () {
                        // Handle icon tap
                      },
                    ),
                  )
                );
              },



            ),


        )
    );
  }
}