Lesson 02

// Some code
import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),

      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Image.asset('assets/apple.png', height: 200, width: 200, fit: BoxFit.fill,),
            SizedBox(height: 20,),
            Image.asset('assets/map.png'),
            SizedBox(height: 65,),
            Image.asset('assets/birds.png'),
            Image.asset('assets/tree.png'),
            SizedBox(height: 210,),
            Image.asset('assets/female.png'),
          ],
        ),
      ),
    );
  }
}

https://www.youtube.com/watch?v=Y--fIzHLu1gwww.youtube.com

// Some code
class Lesson02a extends StatelessWidget {
  const Lesson02a({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFFEFA),

      appBar: AppBar(backgroundColor: Color(0xFF006FFD)),

      body: Column(
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Container(
                height: 191,
                width: 195,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(26),
                  color: Color(0xFF2ED844),
                ),
                padding: EdgeInsets.all(15),
                child: Text(
                  'Hello',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
              Container(
                height: 191,
                width: 195,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(26),
                  color: Color(0xFF2ED844),
                ),
                padding: EdgeInsets.all(15),
                alignment: Alignment.center,
                child: Text(
                  'Hello',
                  style: TextStyle(
                    fontSize: 20,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
              ),
            ],
          ),

          SizedBox(height: 41),

          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                Container(
                  height: 207.33,
                  width: 228,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(26),
                    color: Color(0xFF2ED844),
                  ),
                  padding: EdgeInsets.all(15),
                  alignment: Alignment.bottomLeft,
                  child: Text(
                    'Hello',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
                SizedBox(width: 31),
                Container(
                  height: 207.33,
                  width: 228,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(26),
                    color: Color(0xFF2ED844),
                  ),
                  padding: EdgeInsets.all(15),
                  alignment: Alignment.topRight,
                  child: Text(
                    'Hello',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),

          SizedBox(height: 14.67),

          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: Row(
              children: [
                Container(
                  height: 207.33,
                  width: 228,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(26),
                    color: Color(0xFF2ED844),
                  ),
                  padding: EdgeInsets.all(15),
                  alignment: Alignment.bottomRight,
                  child: Text(
                    'Hello',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),

                SizedBox(width: 35),

                Container(
                  height: 207.33,
                  width: 228,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(26),
                    color: Color(0xFF2ED844),
                  ),
                  padding: EdgeInsets.all(15),
                  alignment: Alignment.topRight,
                  child: Text(
                    'Hello',
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// Some code
class Lesson02b extends StatelessWidget {
  const Lesson02b({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

      appBar: AppBar(backgroundColor: Colors.blue),

      body: Container(
        height: 189.11,
        width: 174.11,
        margin: EdgeInsets.all(20),
        padding: EdgeInsets.all(15),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(18),
          color: Color(0xFF53B175).withValues(alpha: 0.1),
          border: Border.all(color: Color(0xFF53B175), width: 1),
        ),

        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Image.asset('assets/product1.png'),
            Text(
              'Fresh fruits\n& vegetables',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              textAlign: TextAlign.center,
            ),
          ],
        ),
      ),
    );
  }
}

// Some code
class Lesson02c extends StatelessWidget {
  const Lesson02c({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,

      appBar: AppBar(backgroundColor: Colors.blue),

      body: Padding(
        padding: const EdgeInsets.only(top: 75, left: 31, right: 31),
        child: Column(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: 189.11,
                  width: 174.5,
                  padding: EdgeInsets.all(15),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(18),
                    color: Color(0xFF53B175).withValues(alpha: 0.1),
                    border: Border.all(color: Color(0xFF53B175)),
                  ),

                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Image.asset('assets/product1.png'),
                      Text(
                        'Fresh fruits\n& vegetables',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Colors.black,
                        ),
                      ),
                    ],
                  ),
                ),

                Container(
                  height: 189.11,
                  width: 174.5,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(18),
                    color: Color(0xFFF8A44C).withValues(alpha: 0.1),
                    border: Border.all(color: Color(0xFFF8A44C)),
                  ),
                  padding: EdgeInsets.all(15),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Image.asset('assets/product2.png'),
                      Text(
                        'Cooking Oil\n& Ghee',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Colors.black,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),

            SizedBox(height: 15),

            Row(
              children: [
                Container(
                  height: 189.11,
                  width: 174.5,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(18),
                    color: Color(0xFFF7A593).withValues(alpha: 0.1),
                    border: Border.all(color: Color(0xFFF7A593)),
                  ),

                  padding: EdgeInsets.all(15),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      Image.asset('assets/product3.png'),
                      Text(
                        'Meat & Fish',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                          color: Colors.black,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

https://youtu.be/ow64EFH7n3Iyoutu.be

// Some code
class Lesson02d extends StatelessWidget {
  const Lesson02d({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        backgroundColor: Colors.white,

        title: Text(
          'Bevegares',
          style: TextStyle(
            fontSize: 20,
            fontWeight: FontWeight.bold,
            color: Colors.black,
          ),
        ),

        centerTitle: true,

        leading: Icon(Icons.arrow_back_ios),

        actions: [Icon(Icons.tune), SizedBox(width: 15)],
      ),

      body: Padding(
        padding: const EdgeInsets.only(top: 30, left: 30, right: 30),
        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 2,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
            childAspectRatio: 0.67,
          ),
          children: [
          // первая карточка
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Color(0xFFE2E2E2), width: 1),
                borderRadius: BorderRadius.circular(18),
              ),
              padding: EdgeInsets.only(
                top: 20,
                right: 15,
                left: 15,
                bottom: 15,
              ),

              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Center(child: Image.asset('assets/coke.png')),
                  SizedBox(height: 20),
                  Text(
                    'Diet coke',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    '355ml, Price',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF7C7C7C),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '\$1.99',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w800,
                          color: Colors.black,
                        ),
                      ),
                      FloatingActionButton(
                        onPressed: () {},
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(20)
                        ),
                        backgroundColor: Color(0xFF53B175),
                        child: Icon(Icons.add, color: Colors.white, size: 30,),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            // вторая карточка
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Color(0xFFE2E2E2), width: 1),
                borderRadius: BorderRadius.circular(18),
              ),
              padding: EdgeInsets.only(
                top: 20,
                right: 15,
                left: 15,
                bottom: 15,
              ),

              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Center(child: Image.asset('assets/coke.png')),
                  SizedBox(height: 20),
                  Text(
                    'Diet coke',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    '355ml, Price',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF7C7C7C),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '\$1.99',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w800,
                          color: Colors.black,
                        ),
                      ),
                      FloatingActionButton(
                        onPressed: () {},
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20)
                        ),
                        backgroundColor: Color(0xFF53B175),
                        child: Icon(Icons.add, color: Colors.white, size: 30,),
                      ),
                    ],
                  ),
                ],
              ),
            ),
            
            // третья карточка
            Container(
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(color: Color(0xFFE2E2E2), width: 1),
                borderRadius: BorderRadius.circular(18),
              ),
              padding: EdgeInsets.only(
                top: 20,
                right: 15,
                left: 15,
                bottom: 15,
              ),

              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Center(child: Image.asset('assets/coke.png')),
                  SizedBox(height: 20),
                  Text(
                    'Diet coke',
                    style: TextStyle(
                      fontSize: 16,
                      fontWeight: FontWeight.bold,
                      color: Colors.black,
                    ),
                  ),
                  Text(
                    '355ml, Price',
                    style: TextStyle(
                      fontSize: 14,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF7C7C7C),
                    ),
                  ),
                  SizedBox(height: 20),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Text(
                        '\$1.99',
                        style: TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.w800,
                          color: Colors.black,
                        ),
                      ),
                      FloatingActionButton(
                        onPressed: () {},
                        shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20)
                        ),
                        backgroundColor: Color(0xFF53B175),
                        child: Icon(Icons.add, color: Colors.white, size: 30,),
                      ),
                    ],
                  ),
                ],
              ),
            ),

          ],
        ),
      ),
    );
  }
}

// Some code
class Lesson02e extends StatelessWidget {
  const Lesson02e({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFFFFEFA),

      body: Padding(
        padding: EdgeInsets.all(10),
        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),

          children: [
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  height: 97.63,
                  width: 105,
                  decoration: BoxDecoration(
                    color: Color(0xFF0068FF),
                    borderRadius: BorderRadius.circular(20),
                  ),

                  child: Image.asset('assets/fork.png'),
                ),
                SizedBox(height: 3),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
            Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(height: 97.63, width: 105, color: Colors.blue),
                Text('Food'),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

// Some code
class Lesson02f extends StatelessWidget {
  const Lesson02f({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xFFF4F5F9),

      appBar: AppBar(
        backgroundColor: Colors.white,
        leading: Icon(Icons.arrow_back),
        title: Text('Categories'),
        centerTitle: true,
        actions: [
          Padding(
            padding: const EdgeInsets.only(right: 10),
            child: Icon(Icons.tune),
          ),
          //SizedBox(width: 10,)
        ],
      ),

      body: Padding(
        padding: const EdgeInsets.only(top: 21, right: 17, left: 17),
        child: GridView(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            mainAxisSpacing: 10,
            crossAxisSpacing: 10,
          ),
          children: [
            Container(
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  CircleAvatar(
                    radius: 35,
                    backgroundColor: Color(0xFF28B446).withValues(alpha: 0.2),
                    child: Image.asset('assets/Group.png', height: 40, width: 40,),
                  ),
                  Text(
                    'Vegetables',
                    style: TextStyle(
                      fontSize: 10,
                      fontWeight: FontWeight.w500,
                      color: Color(0xFF868889),
                    ),
                  ),
                ],
              ),
            ),

            Container(color: Colors.red),

            Container(color: Colors.red),
          ],
        ),
      ),
    );
  }
}