We can use the flutter widget to create app UI in a fast way, as a result above you will see the source code to create furniture app UI.

1. furniture_home_screen

import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';

class FurnitureHomeScreen extends StatelessWidget {
  List furnutureList = [
    FurnitureModel(
        title: 'Wingback Chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180011959_1445x.png?v=1652975728'),
    FurnitureModel(
        title: 'Nashville chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180013753_1445x.png?v=1652975973'),
    FurnitureModel(
        title: 'Nashville chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740')
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: 100,
            decoration: BoxDecoration(
                color: Colors.blueAccent.withOpacity(0.1)
            ),
          ),
          SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 60,),
                Row(
                  children: [
                    IconButton(onPressed: () {}, icon: Icon(Icons.menu)),
                    Spacer(),
                    IconButton(onPressed: () {}, icon: Icon(Icons.search)),
                    IconButton(
                        onPressed: () {},
                        icon: CircleAvatar(
                          radius: 35,
                          backgroundImage: NetworkImage(
                              'https://d2rd7etdn93tqb.cloudfront.net/wp-content/uploads/2018/07/girl-with-curly-hair-laughing-unsplash-071318.jpg'),
                        )),
                  ],
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 200,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey.withOpacity(0.2),
                            spreadRadius: 0.2,
                            blurRadius: 7,
                            offset: Offset(0, 1))
                      ]),
                  child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(child: Text("Colection".toUpperCase())),
                              RichText(
                                  text: TextSpan(children: [
                                    TextSpan(
                                        text: "New\n",
                                        style: TextStyle(
                                            fontSize: 28,
                                            color: Colors.blueAccent,
                                            fontWeight: FontWeight.bold)),
                                    TextSpan(
                                        text: "Arrivals",
                                        style: TextStyle(
                                            fontSize: 28,
                                            fontWeight: FontWeight.bold,
                                            color: Colors.black)),
                                  ])),
                              Text(
                                "we provide all modern furniture \ncollection for modern life in 2022 ",
                                style: TextStyle(
                                    fontSize: 10, color: Colors.black54),
                              ),
                              Column(
                                children: [
                                  Text(
                                    "Shop Now".toUpperCase(),
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 2,
                                  ),
                                  Container(
                                    width: 65,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                        border: Border.all(
                                            width: 1.5,
                                            color: Colors.blueAccent)),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(
                            width: 15,
                          ),
                          Expanded(
                              child: Image.network(
                                  'https://www.godrejinterio.com/imagestore/B2C/56101502SD00944/56101502SD00944_01_803x602.png'))
                        ],
                      )),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "BEST SELLING",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  height: 300,
                  child: ListView.separated(
                      scrollDirection: Axis.horizontal,
                      shrinkWrap: true,
                      itemBuilder: (context, index) {
                        return _buildFurnitureCard(furnutureList[index]);
                      },
                      separatorBuilder: (context, index) {
                        return SizedBox(
                          width: 20,
                        );
                      },
                      itemCount: furnutureList.length),
                ),
                SizedBox(
                  height: 25,
                ),
                Text(
                  "TRENDING",
                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18),
                ),
                SizedBox(
                  height: 10,
                ),
                Container(
                  height: 200,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(20),
                      color: Colors.white,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.grey.withOpacity(0.2),
                            spreadRadius: 0.2,
                            blurRadius: 7,
                            offset: Offset(0, 1))
                      ]),
                  child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Row(
                        children: [
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: [
                              Container(child: Text("Colection".toUpperCase())),
                              RichText(
                                  text: TextSpan(children: [
                                    TextSpan(
                                        text: "New\n",
                                        style: TextStyle(
                                            fontSize: 28,
                                            color: Colors.blueAccent,
                                            fontWeight: FontWeight.bold)),
                                    TextSpan(
                                        text: "Arrivals",
                                        style: TextStyle(
                                            fontSize: 28,
                                            fontWeight: FontWeight.bold,
                                            color: Colors.black)),
                                  ])),
                              Text(
                                "we provide all modern furniture \ncollection for modern life in 2022 ",
                                style: TextStyle(
                                    fontSize: 10, color: Colors.black54),
                              ),
                              Column(
                                children: [
                                  Text(
                                    "Shop Now".toUpperCase(),
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 2,
                                  ),
                                  Container(
                                    width: 65,
                                    decoration: BoxDecoration(
                                        borderRadius: BorderRadius.circular(10),
                                        border: Border.all(
                                            width: 1.5,
                                            color: Colors.blueAccent)),
                                  )
                                ],
                              )
                            ],
                          ),
                          SizedBox(
                            width: 15,
                          ),
                          Expanded(
                              child: Image.network(
                                  'https://www.godrejinterio.com/imagestore/B2C/56101502SD00944/56101502SD00944_01_803x602.png'))
                        ],
                      )),
                ),
              ],
            ),
          ),

        ],
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      floatingActionButton: FloatingActionButton(
        backgroundColor: Colors.indigoAccent,
        child: Icon(Icons.bookmark_border),
        onPressed: () {},
      ),
      bottomNavigationBar: BottomAppBar(
        shape: CircularNotchedRectangle(),
        child: Container(
          padding: EdgeInsets.all(10),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.home,
                    color: Colors.indigoAccent,
                    size: 25,
                  )),
              SizedBox(
                width: 40,
              ),
              IconButton(
                  onPressed: () {},
                  icon: Icon(
                    Icons.shopping_bag_rounded,
                    color: Colors.grey,
                    size: 25,
                  ))
            ],
          ),
        ),
      ),
    );
  }

  _buildFurnitureCard(FurnitureModel furniture) {
    return Container(
        width: 165,
        child: Stack(
          children: [
            Container(
              width: double.infinity,
              height: 290,
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(10),
                  boxShadow: [
                    BoxShadow(
                        color: Colors.grey.withOpacity(0.1),
                        blurRadius: 5,
                        spreadRadius: 5,
                        offset: Offset(0, 2))
                  ]),
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Image.network(
                    '${furniture.thumbnail}',
                    height: 140,
                  ),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "${furniture.title}",
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                      Text(
                        '${furniture.description}',
                        style: TextStyle(color: Colors.black54, fontSize: 11),
                      ),
                      Text(
                        "\$${furniture.cost}",
                        style: TextStyle(
                            fontSize: 18,
                            fontWeight: FontWeight.bold,
                            color: Colors.blueAccent),
                      ),
                    ],
                  )
                ],
              ),
            ),
            Positioned(
              bottom: 0,
              right: 0,
              child: Container(
                width: 40,
                height: 40,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    color: Colors.blueAccent),
                child: Icon(
                  Icons.bookmark_border,
                  color: Colors.white,
                ),
              ),
            )
          ],
        ));
  }
}

2. furniture_detail_screen

import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';

class FurnitureDetailScreen extends StatelessWidget {
  List furnitureGallary = [
    'https://cdn.pixabay.com/photo/2019/03/21/03/29/chair-4070161__340.png',
    'https://i.ebayimg.com/images/g/PjIAAOSwOKtieN73/s-l500.png',
    'https://images.thdstatic.com/productImages/973bcdb6-62a3-4231-a1bd-780c278ba269/svn/navy-wetiny-gaming-chairs-sd-w24417915-e1_600.jpg',
    'https://images.thdstatic.com/productImages/1d3a69c0-8936-48e2-b205-9f1148639b00/svn/blue-athmile-gaming-chairs-gz-w24417915-64_300.jpg',
    'https://images.thdstatic.com/productImages/973bcdb6-62a3-4231-a1bd-780c278ba269/svn/navy-wetiny-gaming-chairs-sd-w24417915-e1_600.jpg',
    'https://i.ebayimg.com/images/g/PjIAAOSwOKtieN73/s-l500.png',
  ];

  _buildCircle({required Color circleColor}) {
    return Container(
      width: 20,
      height: 20,
      padding: EdgeInsets.symmetric(horizontal: 20),
      margin: EdgeInsets.only(right: 15),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15), color: circleColor),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Container(
            width: 100,
            decoration:
                BoxDecoration(color: Colors.blueAccent.withOpacity(0.1)),
          ),
          SingleChildScrollView(
            padding: EdgeInsets.symmetric(horizontal: 20),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(
                  height: 60,
                ),
                Row(
                  children: [
                    IconButton(
                        onPressed: () {}, icon: Icon(Icons.arrow_back_ios_new)),
                    Spacer(),
                    IconButton(
                        onPressed: () {}, icon: Icon(Icons.bookmark_border)),
                  ],
                ),
                SizedBox(
                  height: 2,
                ),
                Container(
                  width: double.infinity,
                  height: 280,
                  child: Padding(
                      padding: EdgeInsets.all(20),
                      child: Image.network(
                        'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740',
                        fit: BoxFit.fitHeight,
                      )),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 80,
                  child: ListView.separated(
                      scrollDirection: Axis.horizontal,
                      itemBuilder: (context, index) {
                        return Container(
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(20),
                              color: Colors.white),
                          height: 40,
                          width: 80,
                          padding: EdgeInsets.all(10),
                          child: Image.network(furnitureGallary[index]),
                        );
                      },
                      separatorBuilder: (context, index) {
                        return SizedBox(
                          width: 10,
                        );
                      },
                      itemCount: furnitureGallary.length),
                ),
                SizedBox(
                  height: 20,
                ),
                Container(
                  height: 230,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        "Nashville Armechair",
                        style:
                            TextStyle(fontWeight: FontWeight.bold, fontSize: 22),
                      ),
                      Text(
                        "\$1895",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 22,
                            color: Colors.indigoAccent),
                      ),
                      Container(
                        child: Row(
                          children: [
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "Color: ",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 18),
                                ),
                                SizedBox(
                                  height: 8,
                                ),
                                Row(
                                  children: [
                                    Container(
                                      width: 34,
                                      height: 34,
                                      decoration: BoxDecoration(
                                          border: Border.all(
                                              width: 2, color: Colors.indigo),
                                          borderRadius:
                                              BorderRadius.circular(20)),
                                      padding: EdgeInsets.all(5),
                                      child: Container(
                                        alignment: Alignment.center,
                                        width: 20,
                                        height: 20,
                                        decoration: BoxDecoration(
                                            borderRadius:
                                                BorderRadius.circular(10),
                                            color: Colors.indigo),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 15,
                                    ),
                                    _buildCircle(circleColor: Colors.red),
                                    _buildCircle(circleColor: Colors.orange),
                                    _buildCircle(circleColor: Colors.green)
                                  ],
                                )
                              ],
                            ),
                            Spacer(),
                            Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: [
                                Text(
                                  "Quantity: ",
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold, fontSize: 18),
                                ),
                                SizedBox(
                                  height: 8,
                                ),
                                Row(
                                  children: [
                                    Container(
                                      height: 40,
                                      width: 40,
                                      decoration: BoxDecoration(
                                          color:
                                              Colors.blueAccent.withOpacity(0.2),
                                          borderRadius:
                                              BorderRadius.circular(10)),
                                      child: Center(
                                        child: Icon(Icons.remove),
                                      ),
                                    ),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    Text(
                                      "1",
                                      style: TextStyle(
                                          fontSize: 18,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    SizedBox(
                                      width: 10,
                                    ),
                                    Container(
                                      height: 40,
                                      width: 40,
                                      decoration: BoxDecoration(
                                          color:
                                              Colors.blueAccent.withOpacity(0.2),
                                          borderRadius:
                                              BorderRadius.circular(10)),
                                      child: Center(
                                        child: Icon(Icons.add),
                                      ),
                                    ),
                                  ],
                                )
                              ],
                            )
                          ],
                        ),
                      ),
                      Text(
                          "Today modern technology furniture has develop with many benefit and also comfortable. so to get more confortable modern technology furniture has develop with many benefit and also comfortable."),
                    ],
                  ),
                )
              ],
            ),
          ),
        ],
      ),
      bottomSheet: Container(
        height: 80,
        width: double.infinity,
        decoration: BoxDecoration(
          color: Colors.indigo
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.shopping_cart_outlined,color: Colors.white,),
            SizedBox(width: 10,),
            Text("ADD TO CARD",style: TextStyle(fontWeight: FontWeight.w600,fontSize: 22,color: Colors.white),),
          ],
        ),
      ),
    );
  }
}

3. Furniture cart screen

import 'package:flutter/material.dart';
import 'package:learn_flutter_pro/screen/furniture/furniture_model.dart';

class FurnitureCartScreen extends StatelessWidget {
  List furnutureList = [
    FurnitureModel(
        title: 'Wingback Chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180011959_1445x.png?v=1652975728'),
    FurnitureModel(
        title: 'Nashville chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180013753_1445x.png?v=1652975973'),
    FurnitureModel(
        title: 'Nashville chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
            'https://cdn.shopify.com/s/files/1/0028/2571/5830/products/store_item_sku_180015062_1445x.png?v=1652975740'),
    FurnitureModel(
        title: 'Modern chair',
        cost: '1,512',
        description: 'Modern wingback chair with 8 colors choices',
        thumbnail:
        'https://cdn.pixabay.com/photo/2019/03/21/03/29/chair-4070161__340.png'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        title: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton(
                onPressed: () {}, icon: Icon(Icons.arrow_back_ios_new,color: Colors.black)),
            Text(
              "CARD",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18,color: Colors.black),
            ),
            IconButton(onPressed: () {}, icon: Icon(Icons.more_horiz,color: Colors.black)),
          ],
        ),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.symmetric(horizontal: 20,vertical: 20),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            ListView.separated(
                physics: NeverScrollableScrollPhysics(),
                shrinkWrap: true,
                itemBuilder: (context, index) {
                  return _buildFurnitureCard(furnutureList[index]);
                },
                separatorBuilder: (context, index) {
                  return SizedBox(
                    height: 20,
                  );
                },
                itemCount: furnutureList.length),
          ],
        ),
      ),
      bottomSheet: Container(
        height: 100,
        width: double.infinity,
        decoration: BoxDecoration(color: Colors.blueAccent.withOpacity(0.2)),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text("Total Price for 4 Item(s)"),
                Text(
                  "\$99,240",
                  style: TextStyle(
                      color: Colors.indigo,
                      fontSize: 26,
                      fontWeight: FontWeight.w600),
                )
              ],
            ),
            SizedBox(
              width: 25,
            ),
            Container(
              height: 50,
              width: 160,
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10),
                  color: Colors.indigo),
              child: Center(
                  child: Text(
                "BUY NOW",
                style: TextStyle(
                    fontWeight: FontWeight.w600,
                    fontSize: 20,
                    color: Colors.white),
              )),
            )
          ],
        ),
      ),
    );
  }

  _buildFurnitureCard(FurnitureModel furniture) {
    return Container(
      width: double.infinity,
      height: 120,
      decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
          boxShadow: [
            BoxShadow(
                color: Colors.grey.withOpacity(0.1),
                blurRadius: 5,
                spreadRadius: 5,
                offset: Offset(0, 2))
          ]),
      padding: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Image.network(
            '${furniture.thumbnail}',
            width: 80,
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text(
                "${furniture.title}",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              Text(
                'Quantity: 1',
                style: TextStyle(color: Colors.black54, fontSize: 14),
              ),
              Text(
                'Color: Reyal Blue',
                style: TextStyle(color: Colors.black54, fontSize: 14),
              ),
              Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Icon(
                    Icons.delete_forever,
                    size: 18,
                    color: Colors.indigo,
                  ),
                  Text(
                    "REMOVE",
                    style: TextStyle(
                        color: Colors.indigo, fontWeight: FontWeight.bold),
                  )
                ],
              )
            ],
          ),
          Text(
            "\$${furniture.cost}",
            style: TextStyle(color: Colors.indigo,fontWeight: FontWeight.bold,fontSize: 18),
          )
        ],
      ),
    );
  }
}

4. furniture model

class FurnitureModel{
  late String title;
  late String cost;
  late String description;
  late String thumbnail;

  FurnitureModel({required this.title,required this.cost,required this.description,required this.thumbnail});
}

Result:

The post Flutter Furniture App UI – App UI Design using Flutter with Free Source Code first appeared on KHODECAM.

1. connection.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "khodecam";

// Create connection
$conn = new mysqli($servername, $username, $password,$db);

// Check connection
if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
?>

The second file is index.php

2. index.php

<?php 
include 'connection.php';
?>

<!DOCTYPE html>
<html>
<head>
  <title>Khodecam Image Slider</title>
  <meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="./slick/slick.css">
  <link rel="stylesheet" type="text/css" href="./slick/slick-theme.css">
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
    }

    * {
      box-sizing: border-box;
    }

    .slider {
        width: 50%;
        margin: 100px auto;
    }

    .slick-slide {
      margin: 0px 20px;
    }

    .slick-slide img {
      width: 100%;
    }

    .slick-prev:before,
    .slick-next:before {
      color: black;
    }


    .slick-slide {
      transition: all ease-in-out .3s;
      opacity: .2;
    }
    
    .slick-active {
      opacity: .5;
    }

    .slick-current {
      opacity: 1;
    }
    .web_banner{
      object-fit: cover;
      height:290px
    }
    .web_banner_small{
      object-fit: cover;
      height:140px
    }
  </style>
</head>
<body>
	<section class="variable slider">
    <?php 
          $sql = "SELECT * FROM tbl_product";
          $result = $conn->query($sql);
          if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
              ?>
              <div>
                <img class="web_banner" src="<?php echo $row['proThumbnail'] ?>">
              </div>
              <?php
            }
          } else {
            echo "0 results";
          }
         ?>
  </section>
  <section class="center slider">
    <?php 
          $sql = "SELECT * FROM tbl_product";
          $result = $conn->query($sql);
          if ($result->num_rows > 0) {
            while($row = $result->fetch_assoc()) {
              ?>
              <div>
                <img class="web_banner_small" src="<?php echo $row['proThumbnail'] ?>">
              </div>
              <?php
            }
          } else {
            echo "0 results";
          }
         ?>
  </section>
  <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
  <script src="./slick/slick.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
    $(document).on('ready', function() {
      $(".center").slick({
        dots: true,
        infinite: true,
        centerMode: true,
        slidesToShow: 3,
        slidesToScroll: 3
      });
      $(".variable").slick({
        dots: true,
        infinite: true,
        variableWidth: true
      });
    });
</script>

</body>
</html>

Third, we need an SQL script

3. khodecam.sql

CREATE DATABASE IF NOT EXISTS `khodecam`
USE `khodecam`;

CREATE TABLE IF NOT EXISTS `tbl_product` (
  `proId` int(11) NOT NULL AUTO_INCREMENT,
  `proName` char(150) DEFAULT NULL,
  `proPrice` double DEFAULT NULL,
  `proDetail` varchar(50) DEFAULT NULL,
  `proStatus` int(11) DEFAULT 1,
  `proThumbnail` varchar(250) DEFAULT NULL,
  PRIMARY KEY (`proId`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8mb4;

INSERT INTO `tbl_product` (`proId`, `proName`, `proPrice`, `proDetail`, `proStatus`, `proThumbnail`) VALUES
	(1, 'iWatch8', 900, NULL, 1, 'https://economictimes.indiatimes.com/thumb/msid-92667788,width-1200,height-900,resizemode-4,imgsize-29322/apple-watch-series-8.jpg?from=mdr'),
	(2, 'MacBook Pro 14', 2500, NULL, 1, 'https://i.gadgets360cdn.com/large/macbook_pro_2021_india_availability_image_apple_1635230071675.jpg'),
	(3, 'iWatch7', 400, NULL, 1, 'https://static-01.daraz.lk/p/81871d1fd9865874c2f261b000da7b65.jpg'),
	(4, 'GoPro10', 1800, NULL, 1, 'https://static.gopro.com/assets/blta2b8522e5372af40/blt6fbe24e08b6ebc0d/62d807e8d9851110d46cf775/pdp-h10-q2-july-25th-sa-gallery-1920-2x.png'),
	(5, 'Sony Camera', 2000, NULL, 1, 'https://www.sonyalpharumors.com/wp-content/uploads/2018/04/A70001.jpg'),
	(6, 'Ipad', 1800, NULL, 1, 'https://media.idownloadblog.com/wp-content/uploads/2020/04/iPad-Pro-float-ad-banner.jpg'),
	(7, 'Surface', 3000, NULL, 1, 'https://www.edu365.ky/images/2018/11/29/surface-hero-banner.jpg');

Result

You can download the full source code here

Download

The post Image slider with Jquery Slick and PHP first appeared on KHODECAM.

RFlutter Alert is super customizable and easy-to-use alert / popup dialogs for Flutter. You may create reusable alert styles or add buttons as much as you want with ease.

Source Code

1. pubspec.yaml

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  rflutter_alert: ^2.0.4
  get:

2. alert_page2.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:rflutter_alert/rflutter_alert.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('RFLUTTER_ALERT'),
      ),
      body: Container(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                child: Text('Basic Alert'),
                onPressed: () => _onBasicAlertPressed(context),
              ),
              ElevatedButton(
                child: Text('Basic Waiting Alert'),
                onPressed: () => _onBasicWaitingAlertPressed(context),
              ),
              ElevatedButton(
                child: Text('Custom Animation Alert'),
                onPressed: () => _onCustomAnimationAlertPressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with Button'),
                onPressed: () => _onAlertButtonPressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with Buttons'),
                onPressed: () => _onAlertButtonsPressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with Style'),
                onPressed: () => _onAlertWithStylePressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with Custom Image'),
                onPressed: () => _onAlertWithCustomImagePressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with Custom Content'),
                onPressed: () => _onAlertWithCustomContentPressed(context),
              ),
              ElevatedButton(
                child: Text('Alert with/without Root navigator'),
                onPressed: () => _onAlertWithRootNavigator(context),
              ),
            ],
          ),
        ),
      ),
    );
  }

// The easiest way for creating RFlutter Alert
  _onBasicAlertPressed(context) {
    Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
    ).show();
  }

  // Code will continue after alert is closed.
  _onBasicWaitingAlertPressed(context) async {
    await Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
    ).show();

    // Code will continue after alert is closed.
    debugPrint("Alert closed now.");
  }

//Custom animation alert
  _onCustomAnimationAlertPressed(context) {
    Alert(
      context: context,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      alertAnimation: fadeAlertAnimation,
    ).show();
  }

  Widget fadeAlertAnimation(
      BuildContext context,
      Animation<double> animation,
      Animation<double> secondaryAnimation,
      Widget child,
      ) {
    return Align(
      child: FadeTransition(
        opacity: animation,
        child: child,
      ),
    );
  }

// Alert with single button.
  _onAlertButtonPressed(context) {
    Alert(
      context: context,
      type: AlertType.error,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "COOL",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => _onCustomAnimationAlertPressed(context),
          width: 120,
        )
      ],
    ).show();
  }

// Alert with multiple and custom buttons
  _onAlertButtonsPressed(context) {
    Alert(
      context: context,
      type: AlertType.warning,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "FLAT",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
        ),
        DialogButton(
          child: Text(
            "GRADIENT",
            style: TextStyle(color: Colors.white, fontSize: 18),
          ),
          onPressed: () => Navigator.pop(context),
          gradient: LinearGradient(colors: [
            Color.fromRGBO(116, 116, 191, 1.0),
            Color.fromRGBO(52, 138, 199, 1.0),
          ]),
        )
      ],
    ).show();
  }

// Advanced using of alerts
  _onAlertWithStylePressed(context) {
    // Reusable alert style
    var alertStyle = AlertStyle(
        animationType: AnimationType.fromTop,
        isCloseButton: false,
        isOverlayTapDismiss: false,
        descStyle: TextStyle(fontWeight: FontWeight.bold),
        animationDuration: Duration(milliseconds: 400),
        alertBorder: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(
            color: Colors.grey,
          ),
        ),
        titleStyle: TextStyle(
          color: Colors.red,
        ),
        constraints: BoxConstraints.expand(width: 300),
        //First to chars "55" represents transparency of color
        overlayColor: Color(0x55000000),
        alertElevation: 0,
        alertAlignment: Alignment.topCenter);

    // Alert dialog using custom alert style
    Alert(
      context: context,
      style: alertStyle,
      type: AlertType.info,
      title: "RFLUTTER ALERT",
      desc: "Flutter is more awesome with RFlutter Alert.",
      buttons: [
        DialogButton(
          child: Text(
            "COOL",
            style: TextStyle(color: Colors.white, fontSize: 20),
          ),
          onPressed: () => Navigator.pop(context),
          color: Color.fromRGBO(0, 179, 134, 1.0),
          radius: BorderRadius.circular(0.0),
        ),
      ],
    ).show();
  }

// Alert custom images
  _onAlertWithCustomImagePressed(context) {
    Alert(
      context: context,
      title: "KH-COMPUTER",
      desc: "Best computer service in Cambodia",
      image: Image.network("https://t4.ftcdn.net/jpg/02/76/09/17/360_F_276091725_bBSdFPxTN4kgQnURbbUh77xhvCIYbu93.jpg"),
    ).show();
  }

// Alert custom content
  _onAlertWithCustomContentPressed(context) {
    Alert(
        context: context,
        title: "LOGIN",
        content: Column(
          children: <Widget>[
            TextField(
              decoration: InputDecoration(
                icon: Icon(Icons.account_circle),
                labelText: 'Username',
              ),
            ),
            TextField(
              obscureText: true,
              decoration: InputDecoration(
                icon: Icon(Icons.lock),
                labelText: 'Password',
              ),
            ),
          ],
        ),
        buttons: [
          DialogButton(
            onPressed: () => Navigator.pop(context),
            child: Text(
              "LOGIN",
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          )
        ]).show();
  }

// Alert without root navigator
  _onAlertWithRootNavigator(BuildContext context) {
    Navigator.of(context).push(
      PageRouteBuilder(
        pageBuilder: (context, animation, secondaryAnimation) =>
            CupertinoTabScaffold(
              tabBar: CupertinoTabBar(
                items: <BottomNavigationBarItem>[
                  BottomNavigationBarItem(icon: Icon(Icons.account_circle)),
                  BottomNavigationBarItem(icon: Icon(Icons.search))
                ],
              ),
              tabBuilder: (BuildContext context, int index) {
                return CupertinoTabView(
                  builder: (BuildContext context) {
                    return CupertinoPageScaffold(
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Text(
                            "We are inside a CupertinoTabView, which has it's own navigator.",
                            style: TextStyle(inherit: false, color: Colors.black),
                            textAlign: TextAlign.center,
                          ),
                          ElevatedButton(
                            child: Text('Alert without Root navigator'),
                            onPressed: () => Alert(
                                context: context,
                                title:
                                "pop() use root navigator ?\n\n* False will pop Alert and stay in CupertinoTabView\n* True will pop Alert and CupertinoTabView",
                                useRootNavigator: false,
                                buttons: [
                                  DialogButton(
                                    onPressed: () => Navigator.of(context).pop(),
                                    child: Text(
                                      "false",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    ),
                                  ),
                                  DialogButton(
                                    onPressed: () =>
                                        Navigator.of(context, rootNavigator: true)
                                            .pop(),
                                    child: Text(
                                      "true",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    ),
                                  )
                                ]).show(),
                          ),
                          ElevatedButton(
                            child: Text('Alert with Root navigator'),
                            onPressed: () => Alert(
                                context: context,
                                title:
                                "pop() use root navigator ?\n\n* False will pop CupertinoTabView and raise error in the background !\n* True will pop Alert",
                                useRootNavigator: true,
                                buttons: [
                                  DialogButton(
                                    onPressed: () => Navigator.of(context).pop(),
                                    child: Text(
                                      "false",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    ),
                                  ),
                                  DialogButton(
                                    onPressed: () =>
                                        Navigator.of(context, rootNavigator: true)
                                            .pop(),
                                    child: Text(
                                      "true",
                                      style: TextStyle(
                                          color: Colors.white, fontSize: 20),
                                    ),
                                  )
                                ]).show(),
                          ),
                        ],
                      ),
                    );
                  },
                );
              },
            ),
      ),
    );
  }
}

The post Dialog alert with RFlutter Alert Package – Flutter Dialog Alert first appeared on KHODECAM.

Source Code

1. pubspec.yaml

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  flutter_image_slideshow: ^0.1.4

2. SliderPage2.dart

import 'package:flutter/material.dart';
import 'package:flutter_image_slideshow/flutter_image_slideshow.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Image Slide Show'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              ImageSlideshow(
                width: double.infinity,
                height: 200,
                initialPage: 0,
                indicatorColor: Colors.blue,
                indicatorBackgroundColor: Colors.grey,
                children: [
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/01fc3625-89dc-4c2a-9d47-4e44174ae570.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/a8fa8825-8cb2-4b6b-8dac-29a4bf1dae56.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/cf139745-32e9-421c-bee3-bdc72a5f4d7a.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                ],
                onPageChanged: (value) {
                  print('Page changed: $value');
                },
                autoPlayInterval: 3000,
                isLoop: true,
              ),
              SizedBox(
                height: 30,
              ),
              ImageSlideshow(
                width: double.infinity,
                height: 240,
                initialPage: 0,
                indicatorColor: Colors.orange,
                indicatorBackgroundColor: Colors.deepOrange,
                children: [
                  Image.network(
                    'https://www.evetech.co.za/repository/ProductImages/dell-g15-gaming-laptops-980px-v21.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/01fc3625-89dc-4c2a-9d47-4e44174ae570.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/a8fa8825-8cb2-4b6b-8dac-29a4bf1dae56.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/cf139745-32e9-421c-bee3-bdc72a5f4d7a.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                ],
                onPageChanged: (value) {
                  print('Page changed: $value');
                },
                autoPlayInterval: 3000,
                isLoop: true,
              ),
              SizedBox(
                height: 30,
              ),
              ImageSlideshow(
                width: double.infinity,
                height: 200,
                indicatorRadius: 6,
                initialPage: 0,
                indicatorColor: Colors.blue,
                indicatorBackgroundColor: Colors.grey,
                children: [
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/01fc3625-89dc-4c2a-9d47-4e44174ae570.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/a8fa8825-8cb2-4b6b-8dac-29a4bf1dae56.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                  Image.network(
                    'https://m.media-amazon.com/images/S/aplus-media-library-service-media/cf139745-32e9-421c-bee3-bdc72a5f4d7a.__CR0,0,1464,600_PT0_SX1464_V1___.jpg',
                    fit: BoxFit.cover,
                  ),
                ],
                onPageChanged: (value) {
                  print('Page changed: $value');
                },
                autoPlayInterval: 2000,
                isLoop: true,
              ),
            ],
          ),
        ));
  }
}

The post Flutter carousel with image slide show package step by step first appeared on KHODECAM.

Source Code

1. pubspec.yaml

environment:
  sdk: ">=2.16.2 <3.0.0"

dependencies:
  flutter:
    sdk: flutter

  cupertino_icons: ^1.0.2
  carousel_slider: ^4.1.1
  get:

2. SliderPage3.dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
final List<String> imgList = [
  'https://d2dgtayfmpkokn.cloudfront.net/wp-content/uploads/sites/461/2021/03/19103450/Flash-Sale-Mar-2021-Website-Banner-v3.png',
  'https://avdgraph.com/wp-content/uploads/car-rental-banner.jpg',
  'https://graphicsfamily.com/wp-content/uploads/edd/2021/07/Car-Dealer-or-Showroom-Editable-Banner-Design-Template-1180x664.jpg',
  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ0PeCRpARYSmM1BRkzN4yhYocaEQRKLKVJvw&usqp=CAU',
];
class SliderPage3 extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SliderPage3();
  }
}

class _SliderPage3 extends State<SliderPage3> {
  int _current = 0;
  final CarouselController _controller = CarouselController();
  final List<Widget> imageSliders = imgList
      .map((item) => Container(
    child: Container(
      margin: EdgeInsets.all(5.0),
      child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Stack(
            children: <Widget>[
              Image.network(item, fit: BoxFit.cover, width: 1000.0),
              Positioned(
                bottom: 0.0,
                left: 0.0,
                right: 0.0,
                child: Container(
                  decoration: BoxDecoration(
                    gradient: LinearGradient(
                      colors: [
                        Color.fromARGB(200, 0, 0, 0),
                        Color.fromARGB(0, 0, 0, 0)
                      ],
                      begin: Alignment.bottomCenter,
                      end: Alignment.topCenter,
                    ),
                  ),
                  padding: EdgeInsets.symmetric(
                      vertical: 10.0, horizontal: 20.0),
                  child: Text(
                    'No. ${imgList.indexOf(item)} image',
                    style: TextStyle(
                      color: Colors.white,
                      fontSize: 20.0,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                ),
              ),
            ],
          )),
    ),
  ))
      .toList();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Flutter Carousel')),
      body: Column(children: [
        Container(
          child: CarouselSlider(
            items: imageSliders,
            carouselController: _controller,
            options: CarouselOptions(
                autoPlay: true,
                aspectRatio: 2.0,
                onPageChanged: (index, reason) {
                  setState(() {
                    _current = index;
                  });
                }),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: imgList.asMap().entries.map((entry) {
            return GestureDetector(
              onTap: () => _controller.animateToPage(entry.key),
              child: Container(
                width: 12.0,
                height: 12.0,
                margin: EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: (Theme.of(context).brightness == Brightness.dark
                        ? Colors.white
                        : Colors.black)
                        .withOpacity(_current == entry.key ? 0.9 : 0.4)),
              ),
            );
          }).toList(),
        ),
        CarouselSlider(
          items: imageSliders,
          carouselController: _controller,
          options: CarouselOptions(
              autoPlay: true,
              aspectRatio: 2.0,
              onPageChanged: (index, reason) {
                setState(() {
                  _current = index;
                });
              }),
        ),
      ]),
    );
  }
}

The post Flutter carousel slider using carousel_slider package step by step first appeared on KHODECAM.

Source Code

1. SettingPage1.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class SettingPage1 extends StatelessWidget {
  const SettingPage1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(left: 16, top: 25, right: 16),
        child: ListView(
          children: [
            SizedBox(
              height: 20,
            ),
            Row(
              children: [
                CircleAvatar(
                  radius: 42,
                  child: CircleAvatar(
                    radius: 38,
                    backgroundImage: NetworkImage('https://romanticlovesms.com/wp-content/uploads/2022/03/Funny-Captions-for-Profile-Picture-1.jpg'),
                  ),
                ),
                SizedBox(width: 20,),
                Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text("KEO SONITA",style: TextStyle(fontSize: 20,fontWeight: FontWeight.bold),),
                    Text("Aministrator Assistant")
                  ],
                )
              ],
            ),
            SizedBox(
              height: 20,
            ),
            Row(
              children: const [
                Icon(
                  Icons.account_circle_outlined,
                  color: Colors.indigo,
                ),
                SizedBox(
                  width: 8,
                ),
                Text(
                  "Account",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Divider(
              height: 15,
              thickness: 1,
            ),
            SizedBox(
              height: 5,
            ),
            buildSettingOptionRow(context, "Profile"),
            buildSettingOptionRow(context, "Password"),
            buildSettingOptionRow(context, "Social Media"),
            buildSettingOptionRow(context, "Language"),
            buildSettingOptionRow(context, "Notication"),
            buildSettingOptionRow(context, "Privacy Policy"),
            SizedBox(
              height: 40,
            ),
            Row(
              children: [
                Icon(
                  Icons.privacy_tip_rounded,
                  color: Colors.indigo,
                ),
                SizedBox(
                  width: 8,
                ),
                Text(
                  "Permission",
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ],
            ),
            Divider(
              height: 15,
              thickness: 1,
            ),
            SizedBox(
              height: 5,
            ),
            buildPermissionOption("Notification", true),
            buildPermissionOption("Location", true),
            buildPermissionOption("Storage", false),
            SizedBox(
              height: 50,
            ),
          ],
        ),
      ),
    );
  }

  Row buildPermissionOption(String title, bool isActive) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Text(
          title,
          style: TextStyle(
              fontSize: 17,
              fontWeight: FontWeight.w500,
              color: Colors.grey[800]),
        ),
        Transform.scale(
            scale: 0.7,
            child: CupertinoSwitch(
              value: isActive,
              activeColor: Colors.indigoAccent,
              onChanged: (bool val) {},
            ))
      ],
    );
  }

   buildSettingOptionRow(BuildContext context, String title) {
    return GestureDetector(
      onTap: () {
      },
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 8.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text(
              title,
              style: TextStyle(
                fontSize: 17,
                fontWeight: FontWeight.w500,
                color: Colors.grey[800],
              ),
            ),
            Icon(
              Icons.arrow_forward_ios,
              color: Colors.grey,
              size: 20,
            ),
          ],
        ),
      ),
    );
  }
}

The post User profile setting page using flutter step by step – How to create profile setting with flutter first appeared on KHODECAM.

Source Code

1. AuthPage2.dart

import 'package:flutter/material.dart';
import 'dart:ui';
class AuthPage2 extends StatelessWidget {
  const AuthPage2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: double.infinity,
        decoration: const BoxDecoration(
            image: DecorationImage(
                image: NetworkImage("https://cdn.britannica.com/24/77424-050-4FF80B58/Angkor-Wat-Cambodia.jpg"), fit: BoxFit.cover)),
        child: Stack(
          children:[
            Center(
              child: Container(
                margin: const EdgeInsets.all(48.0),
                padding: const EdgeInsets.symmetric(
                    horizontal: 24.0, vertical: 48.0),
                decoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.9),
                    borderRadius: BorderRadius.circular(10.0)),
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 0.5,
                    sigmaY: 1.0,
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.min,
                    children:[
                      CircleAvatar(
                        radius: 55,
                        backgroundImage: NetworkImage('https://us.123rf.com/450wm/krustovin/krustovin1701/krustovin170100013/69671987-travel-direction-compass-airplane-and-globe-concept-travel-and-world-trip-logo-flat-compass-with-air.jpg?ver=6'),
                      ),
                      const SizedBox(height: 10.0),
                      Text(
                        "CAMTRAVEL",
                        style: TextStyle(
                            color: Colors.deepOrange.shade700,
                            fontSize: 24.0,
                            fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(height: 10.0),
                      const Text(
                          "Cambodia Kingdom of Wonder",
                          textAlign: TextAlign.center,
                          style: TextStyle(fontSize: 15.0)),
                      const SizedBox(height: 20.0),
                      SizedBox(
                        width: double.infinity,
                        child: MaterialButton(
                          height: 45,
                          elevation: 0,
                          highlightElevation: 0,
                          color: Colors.white,
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                          child: Text("Create Account"),
                          onPressed: () {},
                        ),
                      ),
                      SizedBox(height: 10,),
                      SizedBox(
                        width: double.infinity,
                        child: MaterialButton(
                          height: 45,
                          elevation: 0,
                          highlightElevation: 0,
                          color: Colors.white.withOpacity(0.4),
                          shape: RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(20.0)),
                          child: Text("Guest"),
                          onPressed: () {},
                        ),
                      ),
                      const SizedBox(height: 30.0),
                      Text.rich(TextSpan(children: [
                        TextSpan(text: "Already have account? "),
                        WidgetSpan(
                            child: InkWell(
                              onTap: () {
                                print("Login tapped");
                              },
                              child: Text("Log in",
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                  )),
                            ))
                      ])),
                    ],
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

The post Authentication welcome page using flutter first appeared on KHODECAM.

Source Code

1. AuthPage1.dart

import 'package:flutter/material.dart';

class AuthPage1 extends StatelessWidget {
  const AuthPage1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          decoration: const BoxDecoration(
            image: DecorationImage(
              image: NetworkImage('https://media.istockphoto.com/photos/modern-blue-coupe-sports-car-in-showroom-picture-id1167559642?k=20&m=1167559642&s=612x612&w=0&h=A2sKCj6WPOaTEavT6M0DSclBe-ZRjd4TdkyivYn75cI='),
              fit: BoxFit.cover,
            ),
          ),
          child: Stack(
            children:[
              Container(
                color: Colors.black.withOpacity(0.7),
                child: Column(
                  children:[
                    const SizedBox(height: kToolbarHeight + 40),
                    Expanded(
                      child: Column(
                        children:const[
                          CircleAvatar(
                            radius: 62,
                            backgroundColor: Colors.red,
                            child: CircleAvatar(
                              radius: 60,
                              backgroundImage: NetworkImage('https://content.wepik.com/statics/12884221/preview-page0.jpg'),
                            ),
                          ),
                          SizedBox(height: 20,),
                          Text(
                            "Welcome",
                            style: TextStyle(
                              color: Colors.white,
                              fontWeight: FontWeight.w600,
                              fontSize: 32.0,
                            ),
                          ),
                          const SizedBox(height: 10.0),
                          Text(
                            "The best car dealer over the world\n your dream come true",
                            style: TextStyle(
                              color: Colors.white60,
                              fontSize: 18.0,
                            ),
                            textAlign: TextAlign.center,
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    Padding(
                      padding:EdgeInsets.symmetric(horizontal: 20),
                      child: Row(
                        children:[
                          const SizedBox(width: 10.0),
                          Expanded(
                            child: MaterialButton(
                              height: 45,
                              color: Colors.orange,
                              textColor: Colors.white,
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20.0),
                              ),
                              child: const Text("Login"),
                              onPressed: () {
                              },
                            ),
                          ),
                          const SizedBox(width: 10.0),
                          Expanded(
                            child: MaterialButton(
                              height: 45,
                              color: Colors.red,
                              textColor: Colors.white,
                              elevation: 0,
                              shape: RoundedRectangleBorder(
                                borderRadius: BorderRadius.circular(20.0),
                              ),
                              child: Text("Signup"),
                              onPressed: () {
                              },
                            ),
                          ),
                          const SizedBox(width: 10.0),
                        ],
                      ),
                    ),
                    const SizedBox(height: 40.0),
                    const Text("www.cardealerkh.com",style: TextStyle(color: Colors.white),),
                    const SizedBox(height: 40.0),
                  ],
                ),
              ),
            ],
          ),
        ));
  }
}

The post Authentication page ui using flutter first appeared on KHODECAM.

Source Code

1. SignupPage1.dart

import 'package:flutter/material.dart';
Color topBgColor = Colors.indigo;
Color bottomBgColor = Colors.indigoAccent;
class SignupPage2 extends StatelessWidget {
  const SignupPage2({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(bottom: 30),
        child: Column(
          children: <Widget>[
            HeaderContainer(),
            Expanded(
              flex: 1,
              child: Container(
                margin: EdgeInsets.only(left: 20, right: 20, top: 20),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    Text("Signup for free",style: TextStyle(fontSize: 18,fontWeight: FontWeight.bold,color: Colors.indigo),),
                    _textInput(hint: "Fullname", icon: Icons.account_circle_outlined),
                    _textInput(hint: "Phone Number", icon: Icons.call),
                    _textInput(hint: "Email", icon: Icons.email),
                    _textInput(hint: "Password", icon: Icons.vpn_key),
                    Container(
                        margin: EdgeInsets.only(top: 15),
                        alignment: Alignment.centerRight,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "Already a member? SIGNIN",
                            ),
                            Spacer(),
                            MaterialButton(
                              elevation: 0.2,
                              height: 45,
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12.0))),
                              onPressed: () {},
                              child: Text(
                                "SIGNUP",
                                style: TextStyle(color: Colors.white,fontSize: 18),
                              ),
                              color: Colors.indigo,
                            )
                          ],
                        )),
                    Spacer(),
                    RichText(
                      text: TextSpan(children: [
                        TextSpan(
                            text: "Copyright BY KHODECAM",
                            style: TextStyle(color: Colors.black)),
                        TextSpan(
                            text: "2022",
                            style: TextStyle(color: topBgColor)),
                      ]),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _textInput({controller, hint, icon}) {
    return Container(
      height: 60,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(20)),
          color: Colors.white,
          border: Border.all(width: 1,color: Colors.blue)
      ),
      padding: EdgeInsets.only(left: 10, top: 8),
      child: TextFormField(
        controller: controller,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: hint,
          prefixIcon: Icon(icon),
        ),
      ),
    );
  }
}

class HeaderContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [topBgColor, bottomBgColor],
              end: Alignment.bottomCenter,
              begin: Alignment.topCenter),
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(120),
              bottomRight: Radius.circular(120))),
      child: Stack(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 80),
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                CircleAvatar(
                  radius: 60,
                  backgroundImage: NetworkImage(
                      'https://rebank.cc/wp-content/uploads/2019/04/circular-wave-logo-template_1061-224.jpg'),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "CGCOM-SHOP",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                      color: Colors.white),
                ),
                Text('www.cgcomshop.com.kh',style: TextStyle(color: Colors.white),)
              ],
            ),
          )
        ],
      ),
    );
  }
}

The post Signup screen for business using flutter with source code first appeared on KHODECAM.

Source Code

import 'package:flutter/material.dart';

class SignupPage1 extends StatelessWidget {
  const SignupPage1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 30),
        child: SingleChildScrollView(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children:[
              SizedBox(height: 80),
              CircleAvatar(
                radius: 60,
                backgroundImage: NetworkImage(
                    'https://i.pinimg.com/736x/47/eb/4b/47eb4b7f8debea30699fef2d88843b51.jpg'),
              ),
              SizedBox(
                height: 10,
              ),
              Text("KHODECAM",style: TextStyle(fontWeight: FontWeight.bold,color: Colors.orange,fontSize: 24),),
              SizedBox(
                height: 30,
              ),
              _emailPasswordWidget(),
              SizedBox(
                height: 20,
              ),
              _submitButton(),
              SizedBox(height: 5),
              _loginAccountLabel(),
            ],
          ),
        ),
      ),
    );
  }
  Widget _formInputFill(String title, {bool isPassword = false}) {
    return Container(
      margin: EdgeInsets.symmetric(vertical: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children:[
          Text(
            title,
            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15),
          ),
          SizedBox(
            height: 10,
          ),
          Container(
            height: 50,
            padding: EdgeInsets.only(left: 20,right: 20),
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(10),
                color: Colors.grey.withOpacity(0.1),
                border: Border.all(width: 2,color: Colors.grey.withOpacity(0.1))
            ),
            child: TextField(
                obscureText: isPassword,
                decoration: InputDecoration(
                  border: InputBorder.none,
                )),
          )
        ],
      ),
    );
  }

  Widget _submitButton() {
    return Container(
      width: double.infinity,
      padding: EdgeInsets.symmetric(vertical: 15),
      alignment: Alignment.center,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: Colors.orange,
      ),
      child: Text(
        'Register Now',
        style: TextStyle(fontSize: 20, color: Colors.white),
      ),
    );
  }

  Widget _loginAccountLabel() {
    return InkWell(
      onTap: () {
      },
      child: Container(
        margin: EdgeInsets.symmetric(vertical: 20),
        padding: EdgeInsets.all(15),
        alignment: Alignment.bottomCenter,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children:[
            Text(
              'Already have an account ?',
              style: TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
            ),
            SizedBox(
              width: 10,
            ),
            Text(
              'Login',
              style: TextStyle(
                  color: Colors.orange,
                  fontSize: 13,
                  fontWeight: FontWeight.w600),
            ),
          ],
        ),
      ),
    );
  }


  Widget _emailPasswordWidget() {
    return Column(
      children:[
        _formInputFill("Fullname"),
        _formInputFill("Phone"),
        _formInputFill("Email"),
        _formInputFill("Password", isPassword: true),
      ],
    );
  }
}

The post Signup screen using flutter with source code first appeared on KHODECAM.

Source code

1. LoginPage3.dart

import 'package:flutter/material.dart';
Color topBgColor = Color(0xffF3498DB);
Color bottomBgColor = Color(0xffF5DADE2);
class LoginPage3 extends StatelessWidget {
  const LoginPage3({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.only(bottom: 30),
        child: Column(
          children: <Widget>[
            HeaderContainer(),
            Expanded(
              flex: 1,
              child: Container(
                margin: EdgeInsets.only(left: 20, right: 20, top: 20),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  children: <Widget>[
                    _textInput(hint: "Email", icon: Icons.email),
                    _textInput(hint: "Password", icon: Icons.vpn_key),
                    Container(
                        margin: EdgeInsets.only(top: 15),
                        alignment: Alignment.centerRight,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              "Forgot Password?",
                            ),
                            Spacer(),
                            MaterialButton(
                              elevation: 0.2,
                              height: 45,
                              shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(12.0))),
                              onPressed: () {},
                              child: Text(
                                "Sign in",
                                style: TextStyle(color: Colors.white,fontSize: 18),
                              ),
                              color: Colors.indigo,
                            )
                          ],
                        )),
                    Spacer(),
                    RichText(
                      text: TextSpan(children: [
                        TextSpan(
                            text: "Don't have an account ? ",
                            style: TextStyle(color: Colors.black)),
                        TextSpan(
                            text: "Signup",
                            style: TextStyle(color: topBgColor)),
                      ]),
                    )
                  ],
                ),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _textInput({controller, hint, icon}) {
    return Container(
      height: 60,
      margin: EdgeInsets.only(top: 10),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(20)),
        color: Colors.white,
        border: Border.all(width: 1,color: Colors.blue)
      ),
      padding: EdgeInsets.only(left: 10, top: 8),
      child: TextFormField(
        controller: controller,
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: hint,
          prefixIcon: Icon(icon),
        ),
      ),
    );
  }
}

class HeaderContainer extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height * 0.4,
      decoration: BoxDecoration(
          gradient: LinearGradient(
              colors: [topBgColor, bottomBgColor],
              end: Alignment.bottomCenter,
              begin: Alignment.topCenter),
          borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(120),
              bottomRight: Radius.circular(120))),
      child: Stack(
        children: <Widget>[
          Container(
            margin: EdgeInsets.only(top: 80),
            width: double.infinity,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                CircleAvatar(
                  radius: 60,
                  backgroundImage: NetworkImage(
                      'https://rebank.cc/wp-content/uploads/2019/04/circular-wave-logo-template_1061-224.jpg'),
                ),
                SizedBox(
                  height: 20,
                ),
                Text(
                  "CGCOM-SHOP",
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                      color: Colors.white),
                ),
                Text('www.cgcomshop.com.kh',style: TextStyle(color: Colors.white),)
              ],
            ),
          )
        ],
      ),
    );
  }
}

The post Login Page UI with flutter – How to create Login Page Screen using flutter step by step first appeared on KHODECAM.

Source Code

import 'package:flutter/material.dart';
class LoginPage2 extends StatelessWidget {
  const LoginPage2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          Expanded(
            child: Stack(
              fit: StackFit.expand,
              children: [
                Container(
                  decoration: BoxDecoration(
                    image: DecorationImage(
                      image: NetworkImage('https://t3.ftcdn.net/jpg/03/55/60/70/360_F_355607062_zYMS8jaz4SfoykpWz5oViRVKL32IabTP.jpg'),
                      fit: BoxFit.cover,
                    ),
                  ),
                  foregroundDecoration: BoxDecoration(
                    color: Colors.white.withOpacity(0.1),
                  ),
                ),
                Align(
                  alignment: Alignment.center,
                  child: ListView(
                    padding: const EdgeInsets.all(32.0),
                    shrinkWrap: true,
                    children: [
                      CircleAvatar(
                        radius: 60,
                        backgroundImage: NetworkImage('https://i.pinimg.com/originals/19/cd/f8/19cdf897a811960c91b1763113dc327a.png'),
                      ),
                      SizedBox(height: 10,),
                      Text(
                        "T-STORE",
                        style: TextStyle(color: Colors.black,fontSize: 32,fontWeight: FontWeight.bold),
                        textAlign: TextAlign.center,
                      ),
                      const SizedBox(height: 20.0),
                      TextField(
                        decoration: InputDecoration(
                          contentPadding: const EdgeInsets.symmetric(
                              vertical: 16.0, horizontal: 32.0),
                          suffixIcon: Icon(
                            Icons.person,
                            color: Colors.black,
                          ),
                          hintText: "Username",
                          hintStyle: TextStyle(color: Colors.black),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(40.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.black),
                            borderRadius: BorderRadius.circular(40.0),
                          ),
                        ),
                      ),
                      const SizedBox(height: 10.0),
                      TextField(
                        decoration: InputDecoration(
                          contentPadding: const EdgeInsets.symmetric(
                              vertical: 16.0, horizontal: 32.0),
                          suffixIcon: Icon(
                            Icons.lock,
                            color: Colors.black,
                          ),
                          hintText: "Password",
                          hintStyle: TextStyle(color: Colors.black),
                          border: OutlineInputBorder(
                            borderRadius: BorderRadius.circular(40.0),
                          ),
                          enabledBorder: OutlineInputBorder(
                            borderSide: BorderSide(color: Colors.black),
                            borderRadius: BorderRadius.circular(40.0),
                          ),
                        ),
                      ),
                      const SizedBox(height: 20.0),
                      MaterialButton(
                        height: 50,
                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
                        onPressed: () {},
                        color: Colors.black,
                        child: Text(
                          'Login',
                          style: TextStyle(color: Colors.white, fontSize: 18.0),
                        ),
                      ),
                      SizedBox(height: 20,),
                      Row(
                        children: [
                          Text("Create new account"),
                          Spacer(),
                          Text("Forgot password"),
                        ],
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

The post Login page ui using flutter – How to create login ui with flutter first appeared on KHODECAM.

Source Code

import 'package:flutter/material.dart';

class LoginPage1 extends StatelessWidget {
  const LoginPage1({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildLoginContent(),
    );
  }

  Widget _buildLoginContent() {
    return Container(
      color: Colors.indigo,
      padding: EdgeInsets.all(50),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          SizedBox(
            height: 50,
          ),
          CircleAvatar(
            radius: 60,
            backgroundImage: NetworkImage(
                'https://www.designevo.com/res/templates/thumb_small/express-logistics-circle-and-wing.webp'),
          ),
          SizedBox(
            height: 15,
          ),
          Text("KHODECAM",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20,color: Colors.white),),
          SizedBox(
            height: 30,
          ),
          ListTile(
              title: TextField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                    hintText: "Email address:",
                    hintStyle: TextStyle(color: Colors.white70),
                    border: InputBorder.none,
                    icon: Icon(
                      Icons.email,
                      color: Colors.white70,
                    )),
              )),
          Divider(
            color: Colors.grey.shade600,
          ),
          ListTile(
              title: TextField(
                style: TextStyle(color: Colors.white),
                decoration: InputDecoration(
                    hintText: "Password:",
                    hintStyle: TextStyle(color: Colors.white70),
                    border: InputBorder.none,
                    icon: Icon(
                      Icons.lock,
                      color: Colors.white70,
                    )),
              )),
          Divider(
            color: Colors.grey.shade600,
          ),
          SizedBox(
            height: 20,
          ),
          Row(
            children: <Widget>[
              Text(
                'Forgot your password?',
                style: TextStyle(color: Colors.grey.shade500),
              ),
              Spacer(),
              Container(
                height: 40,
                child: MaterialButton(
                  onPressed: () {},
                  color: Colors.green,
                  child: Text(
                    'Login',
                    style: TextStyle(color: Colors.white, fontSize: 16.0),
                  ),
                ),
              ),
            ],
          ),

        ],
      ),
    );
  }
}

The post Flutter login page ui – How to create login page with flutter first appeared on KHODECAM.

1. TextField
2. ClipPath
3. ListView
4. Expanded
5. ChoiceChip
6. FloatingActionButton and more…

Sample Screen

Source Code

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBody: true,
      extendBodyBehindAppBar: true,
      body: Stack(
        children: [
          ClipPath(
            child: Container(
              height: 380,
              decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage('https://media.istockphoto.com/photos/headshot-portrait-of-smiling-ethnic-businessman-in-office-picture-id1300512215?b=1&k=20&m=1300512215&s=170667a&w=0&h=LsZL_-vvAHB2A2sNLHu9Vpoib_3aLLkRamveVW3AGeQ='), fit: BoxFit.cover),
              ),
              foregroundDecoration:
              BoxDecoration(color: Colors.deepPurpleAccent.withOpacity(0.8)),
            ),
          ),
          ListView(
            padding: const EdgeInsets.all(8.0),
            children: [
              const SizedBox(height: 90),
              _buildAvatar('https://media.istockphoto.com/photos/headshot-portrait-of-smiling-ethnic-businessman-in-office-picture-id1300512215?b=1&k=20&m=1300512215&s=170667a&w=0&h=LsZL_-vvAHB2A2sNLHu9Vpoib_3aLLkRamveVW3AGeQ='),
              const SizedBox(height: 10.0),
              Text(
                "Som Piseth",
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 22,
                  fontWeight: FontWeight.bold
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 5.0),
              Text(
                "Mobile UI, UX Design",
                style: TextStyle(
                  color: Colors.white,
                ),
                textAlign: TextAlign.center,
              ),
              const SizedBox(height: 10.0),
              Card(
                color: Colors.white,
                elevation: 0,
                margin: const EdgeInsets.symmetric(
                  vertical: 8.0,
                  horizontal: 20.0,
                ),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(20.0),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Row(
                    children: [
                      Expanded(
                        child: Column(
                          children: [
                            Text(
                              "26year",
                              style: Theme.of(context).textTheme.headline5,
                            ),
                            const SizedBox(height: 10.0),
                            Text(
                              "Age",
                              style: Theme.of(context).textTheme.subtitle1,
                            ),

                          ],
                        ),
                      ),
                      Expanded(
                        child: Column(
                          children: [
                            Text(
                              "4year",
                              style: Theme.of(context).textTheme.headline5,
                            ),
                            const SizedBox(height: 10.0),
                            Text(
                              "Experience",
                              style: Theme.of(context).textTheme.subtitle1,
                            ),

                          ],
                        ),
                      ),
                      Expanded(
                        child: Column(
                          children: [
                            Text(
                              r"$900",
                              style: Theme.of(context).textTheme.headline5,
                            ),
                            const SizedBox(height: 10.0),
                            Text(
                              "Salary",
                              style: Theme.of(context).textTheme.subtitle1,
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 10.0),
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: [
                    const Text("Profile Information"),
                    TextField(
                      controller: TextEditingController()..text = 'Som Piseth',
                      decoration: InputDecoration(
                        labelText: "FullName",
                      ),
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    const TextField(
                      decoration: InputDecoration(
                        labelText: "Education",
                      ),
                    ),
                    const SizedBox(height: 10.0),
                    const TextField(
                      decoration: InputDecoration(
                        labelText: "Mobile Phone",
                      ),
                      keyboardType: TextInputType.phone,
                    ),
                    const SizedBox(height: 10.0),
                    InputDatePickerFormField(
                      firstDate: DateTime(DateTime.now().year - 5),
                      lastDate: DateTime(DateTime.now().year + 5),
                      initialDate: DateTime.now(),
                      fieldLabelText: "Date of Birth",
                    ),
                    const SizedBox(height: 10.0),
                    const Text(
                      "Programming Languages",
                    ),
                    const SizedBox(height: 5.0),
                    Wrap(
                      spacing: 10.0,
                      runSpacing: 10.0,
                      children: [
                        ChoiceChip(
                          label: const Text("Html & CSS"),
                          onSelected: (val) {},
                          selected: true,
                        ),
                        ChoiceChip(
                          label: const Text("Javascript"),
                          onSelected: (val) {},
                          selected: true,
                        ),
                        ChoiceChip(
                          label: const Text("Jquery"),
                          onSelected: (val) {},
                          selected: true,
                        ),
                        ChoiceChip(
                          label: const Text("Bootstrap"),
                          onSelected: (val) {},
                          selected: true,
                        ),
                        ChoiceChip(
                          label: const Text("PHP"),
                          onSelected: (val) {},
                          selected: false,
                        ),
                        ChoiceChip(
                          label: const Text("Flutter"),
                          onSelected: (val) {},
                          selected: false,
                        ),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.save),
        backgroundColor: Colors.indigo,
        onPressed: () {},
      ),
    );
  }

  CircleAvatar _buildAvatar(String image, {double radius = 80}) {
    return CircleAvatar(
      backgroundColor: Colors.white,
      radius: radius,
      child: CircleAvatar(
        radius: radius - 2,
        backgroundImage: NetworkImage(image),
      ),
    );
  }
}

The post Flutter user profile form page with source code – user profile form page design using flutter first appeared on KHODECAM.

in this user profile detail screen using flutter you will learn a lot of component such has;

1. Stack
2. CircleAvata
3. SingleChildScrollView
4. ChoiceChip
5. ListTile and More…

Sample UI

Source Code

1. User Profile Page 8

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: const Icon(Icons.arrow_back_ios_outlined,color: Colors.grey,),
        backgroundColor: Colors.transparent,
        elevation: 0,
        actions: [
          IconButton(
            icon: const Icon(
              Icons.favorite_border,
              color: Colors.grey,
            ),
            onPressed: () {},
          ),
          IconButton(
            icon: const Icon(
              Icons.ios_share,
              color: Colors.grey,
            ),
            onPressed: () {},
          )
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            const SizedBox(height: 10,),
            Row(
              children: [
                const SizedBox(width: 20.0,),
                const SizedBox(
                    width: 90.0,
                    height: 90.0,
                    child: CircleAvatar(
                        radius: 40,
                        backgroundColor: Colors.deepPurpleAccent,
                        child: CircleAvatar(
                            radius: 39.0, backgroundImage: NetworkImage("https://salle306.fr/wp-content/plugins/rentmy-online-rental-shop/assets/profile.png")))),
                const SizedBox(width: 20.0),
                Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const SizedBox(height: 10,),
                    const Text(
                      "CHAN PHALLA",
                      style: TextStyle(
                          fontSize: 18.0, fontWeight: FontWeight.bold),
                    ),
                    const SizedBox(height: 8.0),
                    const Text("Debt Management Specialist"),
                    const SizedBox(height: 5.0),
                    Row(
                      children: [
                        Text(
                          "Phnom Penh, Cambodia",
                          style: TextStyle(color: Colors.grey),
                        ),
                      ],
                    ),
                    SizedBox(height: 5.0),
                    Container(
                      child: Row(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: [
                          CircleAvatar(
                            backgroundColor: Colors.blue,
                            radius: 12,
                            child: Icon(Icons.facebook_rounded,color: Colors.white,size: 20,),
                          ),
                          SizedBox(width: 5,),
                          CircleAvatar(
                            backgroundColor: Colors.red,
                            radius: 12,
                            child: Icon(Icons.play_circle_fill_outlined,color: Colors.white,size: 20,),
                          ),
                          SizedBox(width: 5,),
                          CircleAvatar(
                            backgroundColor: Colors.green,
                            radius: 12,
                            child: Icon(Icons.search,color: Colors.white,size: 20,),
                          ),
                        ],
                      ),
                    ),
                  ],
                )
              ],
            ),
            SizedBox(height: 25.0),
            _buildTitle("Profile"),
            _buildProfile(
                profile: "- FullName: Pi Nita",),
            _buildProfile(
              profile: "- Gender: Female",),
            _buildProfile(
              profile: "- Date of Birth: 20-02-2001",),
            _buildProfile(
              profile: "- Phone: +855 12 789 987",),
            _buildProfile(
              profile: "- Married: Single",),
            SizedBox(height: 20,),
            _buildTitle("Skills"),
            SizedBox(height: 10.0),
            Padding(
              padding: EdgeInsets.only(left: 20,right: 20),
              child: Wrap(
                spacing: 4.0,
                runSpacing: 0.0,
                children: [
                  _buildChoiceChip(label: "Loan Analysis",status: true),
                  _buildChoiceChip(label: "Secretariat",status: true),
                  _buildChoiceChip(label: "Administrator",status: true),
                  _buildChoiceChip(label: "English Translator",status: true),
                  _buildChoiceChip(label: "Loan Terms",status: true),
                  _buildChoiceChip(label: "Agreement",status: true),
                ],
              ),
            ),
            SizedBox(height: 30.0),
            _buildTitle("Experience"),
            _buildExperienceRow(
                company: "CAMB - ETOP",
                position: "Loan Analysis",
                duration: "2020 - 2022"),
            _buildExperienceRow(
                company: "KHBASE - LAW",
                position: "Secretary",
                duration: "2018 - 2020"),
            SizedBox(height: 20.0),

          ],
        ),
      ),
    );
  }

  ChoiceChip _buildChoiceChip({required String label, required bool status}){
    return ChoiceChip(label: Text(label), selected: status,onSelected: (val) {},);
  }

  Container _buildProfile(
      {required String profile,}) {
    return Container(
      height: 30,
      child: ListTile(
        contentPadding: EdgeInsets.only(left:30),
        dense: true,
        title: Text(
          profile,
          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600,fontSize: 16),
        ),
      ),
    );
  }

  ListTile _buildExperienceRow(
      {required String company, String? position, String? duration}) {
    return ListTile(
      dense: true,
      leading: const Padding(
        padding: const EdgeInsets.only(top: 8.0, left: 20.0),
        child: Icon(
          Icons.arrow_forward_ios,
          size: 12.0,
          color: Colors.black54,
        ),
      ),
      title: Text(
        company,
        style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w600,fontSize: 18),
      ),
      subtitle: Text("$position ($duration)"),
    );
  }

  Widget _buildTitle(String title) {
    return Padding(
      padding: const EdgeInsets.only(left: 20.0,right: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            title.toUpperCase(),
            style: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
          ),
           Divider(
            color: Colors.grey.withOpacity(0.5),
          ),
        ],
      ),
    );
  }
}

The post Flutter user profile detail screen with free source code – user profile ui page design using Flutter first appeared on KHODECAM.

1. Stack
2. SingleChildScrollView
3. CircleAvata
4. Position
5. Expanded
6. …

User Profile Page Sample

Source Code

1. ProfilePage9.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade300,
      body: SingleChildScrollView(
        child: Stack(
          children: [
            SizedBox(
              height: 280,
              width: double.infinity,
              child: Image.network(
                'https://romanticlovesms.com/wp-content/uploads/2022/03/Funny-Captions-for-Profile-Picture-1.jpg',
                fit: BoxFit.cover,
              ),
            ),
            Container(
              margin: EdgeInsets.fromLTRB(16.0, 240.0, 16.0, 16.0),
              child: Column(
                children: [
                  Stack(
                    children: [
                      Container(
                        padding: EdgeInsets.all(16.0),
                        margin: EdgeInsets.only(top: 16.0),
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: BorderRadius.circular(20.0)),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Container(
                                margin: const EdgeInsets.only(left: 110.0),
                                child: Row(
                                  mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.start,
                                  children: [
                                    Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      mainAxisAlignment:
                                          MainAxisAlignment.start,
                                      children: [
                                        Text(
                                          "Keov Nita",
                                          style: Theme.of(context)
                                              .textTheme
                                              .headline6,
                                        ),
                                        Text(
                                          "Graphic Designer",
                                          style: Theme.of(context)
                                              .textTheme
                                              .bodyText1,
                                        ),
                                        SizedBox(
                                          height: 40,
                                        )
                                      ],
                                    ),
                                    Spacer(),
                                    CircleAvatar(
                                      backgroundColor: Colors.blueAccent,
                                      child: IconButton(
                                          onPressed: () {},
                                          icon: Icon(
                                            Icons.edit_outlined,
                                            color: Colors.white,
                                            size: 18,
                                          )),
                                    )
                                  ],
                                )),
                            SizedBox(height: 10.0),
                            Row(
                              children: [
                                Expanded(
                                  child: Column(
                                    children: const [Text("22"), Text("Age")],
                                  ),
                                ),
                                Expanded(
                                  child: Column(
                                    children: const [Text("1.68"), Text("Meter")],
                                  ),
                                ),
                                Expanded(
                                  child: Column(
                                    children: const [Text("49"), Text("Weight")],
                                  ),
                                ),
                              ],
                            ),
                          ],
                        ),
                      ),
                      Container(
                        height: 90,
                        width: 90,
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(20.0),
                            image: const DecorationImage(
                                image: NetworkImage(
                                    'https://romanticlovesms.com/wp-content/uploads/2022/03/Funny-Captions-for-Profile-Picture-1.jpg'),
                                fit: BoxFit.cover)),
                        margin: EdgeInsets.only(left: 20.0),
                      ),
                    ],
                  ),
                  const SizedBox(height: 20.0),
                  Container(
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(20.0),
                    ),
                    child: Column(
                      children: const [
                        ListTile(
                          title: Text("Profile Information"),
                        ),
                        Divider(),
                        ListTile(
                          title: Text("Date of Birth"),
                          subtitle: Text("12 September 2001"),
                          leading: Icon(Icons.calendar_view_day),
                        ),
                        ListTile(
                          title: Text("Education"),
                          subtitle: Text("Bachelor Degree"),
                          leading: Icon(Icons.school_outlined),
                        ),
                        ListTile(
                          title: Text("Email"),
                          subtitle: Text("nita.khgd@gmail.com"),
                          leading: Icon(Icons.mail_outline),
                        ),
                        ListTile(
                          title: Text("Phone"),
                          subtitle: Text("+855 12 987 789"),
                          leading: Icon(Icons.phone),
                        ),
                        ListTile(
                          title: Text("Address"),
                          subtitle: Text(
                              "Stung Meanchey District, Stung Meanchey Commune, Phnom Penh, Cambodia 1200"),
                          leading: Icon(Icons.map),
                        ),
                        SizedBox(
                          height: 10,
                        ),
                      ],
                    ),
                  )
                ],
              ),
            ),
            Positioned(
              top: 60,
              left: 20,
              child: MaterialButton(
                minWidth: 0.2,
                elevation: 0.2,
                color: Colors.white,
                child: const Icon(Icons.arrow_back_ios_outlined,
                    color: Colors.indigo),
                shape: RoundedRectangleBorder(
                  borderRadius: BorderRadius.circular(30.0),
                ),
                onPressed: () {},
              ),
            ),
          ],
        ),
      ),
    );
  }
}

The post Flutter user profile page – Flutter modern profile ui with custom layout – free source code first appeared on KHODECAM.

1. Stack
2. Network Image
3. ClipRRect
4. Position
5. MaterialButton
6. TextField
7. ChoiceChip

You can copy source code below to see as the result above.

1. ProfileForm

import 'package:flutter/material.dart';
class ProfilePage10 extends StatelessWidget {
  const ProfilePage10({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: 340,
              child: Stack(
                children: [
                  SizedBox(
                    height: double.infinity,
                    width: double.infinity,
                    child: ClipRRect(
                      borderRadius: BorderRadius.only(bottomRight: Radius.circular(40),bottomLeft: Radius.circular(40)),
                      child: Image.network(
                        'https://media.istockphoto.com/photos/headshot-portrait-of-smiling-male-employee-in-office-picture-id1309328823?b=1&k=20&m=1309328823&s=170667a&w=0&h=a-f8vR5TDFnkMY5poQXfQhDSnK1iImIfgVTVpFZi_KU=',
                        fit: BoxFit.cover,
                      ),
                    )
                  ),
                  Positioned(child: Container(
                    margin: const EdgeInsets.only(left: 20,right: 20,top: 60),
                    child: Row(
                      children: [
                        MaterialButton(
                          minWidth: 0.2,
                          elevation: 0.4,
                          color: Colors.white,
                          child: const Icon(Icons.arrow_back_ios_outlined,color: Colors.indigo),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          onPressed: () {},
                        ),
                        const Spacer(),
                        MaterialButton(
                          minWidth: 0,
                          elevation: 0.4,
                          color: Colors.white,
                          child: const Icon(
                            Icons.camera,
                            color: Colors.indigoAccent,
                          ),
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(20.0),
                          ),
                          onPressed: () {},
                        ),
                      ],
                    )
                  ))
                ],
              ),
            ),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Text("Profile Information"),
                  TextField(
                    controller: TextEditingController()..text = 'Jonh Smith',
                    decoration: InputDecoration(
                      labelText: "FullName",
                    ),
                    style: TextStyle(
                      fontSize: 18.0,
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: "Education",
                    ),
                  ),
                  const SizedBox(height: 10.0),
                  const TextField(
                    decoration: InputDecoration(
                      labelText: "Mobile Phone",
                    ),
                    keyboardType: TextInputType.phone,
                  ),
                  const SizedBox(height: 10.0),
                  InputDatePickerFormField(
                    firstDate: DateTime(DateTime.now().year - 5),
                    lastDate: DateTime(DateTime.now().year + 5),
                    initialDate: DateTime.now(),
                    fieldLabelText: "Date of Birth",
                  ),
                  const SizedBox(height: 10.0),
                  const Text(
                    "Programming Languages",
                  ),
                  const SizedBox(height: 5.0),
                  Wrap(
                    spacing: 10.0,
                    runSpacing: 10.0,
                    children: [
                      ChoiceChip(
                        label: const Text("Html & CSS"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Javascript"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Jquery"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("Bootstrap"),
                        onSelected: (val) {},
                        selected: true,
                      ),
                      ChoiceChip(
                        label: const Text("PHP"),
                        onSelected: (val) {},
                        selected: false,
                      ),
                      ChoiceChip(
                        label: const Text("Flutter"),
                        onSelected: (val) {},
                        selected: false,
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      bottomNavigationBar: Container(
        height: 70,
        padding: const EdgeInsets.only(bottom: 15),
        child: TextButton(
          onPressed: (){

          },
          style: ButtonStyle(backgroundColor: MaterialStateProperty.all(Colors.indigo)),
          child: const Text("Update Profile",style: TextStyle(color: Colors.white,fontSize: 16),),
        ),
      ),
    );
  }
}

The post Flutter user profile form – free user profile form using flutter with source code first appeared on KHODECAM.

We use the Flutter language to create a user profile page that you can download at the source code below with clean code design.

1. profile_sample_two.dart

import 'package:flutter/material.dart';
class ProfileSampleTwo extends StatelessWidget {
  const ProfileSampleTwo({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Profile UI"),
        backgroundColor: Colors.indigo,
        centerTitle: true,
        elevation: 0,
      ),
      body: ListView(
        children: <Widget>[
          Container(
            height: 240,
            decoration: const BoxDecoration(
                color: Colors.indigo),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    Stack(
                      children: [
                        const CircleAvatar(
                          minRadius: 65,
                          backgroundColor: Colors.indigoAccent,
                          child: CircleAvatar(
                            backgroundImage: NetworkImage('https://romanticlovesms.com/wp-content/uploads/2022/03/Funny-Captions-for-Profile-Picture-1.jpg'),
                            minRadius: 60,
                          ),
                        ),
                        Positioned(bottom:0,right: 0,child: CircleAvatar(
                          backgroundColor: Colors.deepOrangeAccent,
                          child: IconButton(
                            onPressed: (){

                            },
                            icon: Icon(Icons.edit,color: Colors.white,),
                          ),
                        ))
                      ],
                    )
                  ],
                ),
                const SizedBox(
                  height: 10,
                ),
                const Text(
                  "KEOV THIDA",
                  style: TextStyle(fontSize: 22.0, color: Colors.white),
                ),
                const SizedBox(
                  height: 5,
                ),
                const Text(
                  "Graphic Designer",
                  style: TextStyle(fontSize: 14.0, color: Colors.grey),
                )
              ],
            ),
          ),
          Row(
            children: <Widget>[
              Expanded(
                child: Container(
                  color: Colors.blueAccent,
                  child: ListTile(
                    title: const Text(
                      "3year",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24.0),
                    ),
                    subtitle: Text(
                      "Experiences".toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white60),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.indigo.shade800,
                  child: ListTile(
                    title: const Text(
                      r"$700",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24.0),
                    ),
                    subtitle: Text(
                      "Salary".toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white60),
                    ),
                  ),
                ),
              ),
              Expanded(
                child: Container(
                  color: Colors.indigo.shade600,
                  child: ListTile(
                    title: const Text(
                      r"2year",
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          color: Colors.white,
                          fontWeight: FontWeight.bold,
                          fontSize: 24.0),
                    ),
                    subtitle: Text(
                      "Contract".toUpperCase(),
                      textAlign: TextAlign.center,
                      style: TextStyle(color: Colors.white60),
                    ),
                  ),
                ),
              ),
            ],
          ),
          const ListTile(
            dense: true,
            title: Text(
              "Name",
              style: TextStyle(color: Colors.indigo, fontSize: 12.0),
            ),
            subtitle: Text(
              "KEOV THIDA",
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          const Divider(),
          const ListTile(
            dense: true,
            title: Text(
              "Gender",
              style: TextStyle(color: Colors.indigo, fontSize: 12.0),
            ),
            subtitle: Text(
              "Female",
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          const Divider(),
          const ListTile(
            dense: true,
            title: Text(
              "Date Of Birth",
              style: TextStyle(color: Colors.indigo, fontSize: 12.0),
            ),
            subtitle: Text(
              "02-09-1996",
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          const Divider(),
          const ListTile(
            dense: true,
            title: Text(
              "Phone",
              style: TextStyle(color: Colors.indigo, fontSize: 12.0),
            ),
            subtitle: Text(
              "+855 12999019",
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          const Divider(),
          const ListTile(
            dense: true,
            title: Text(
              "Address",
              style: TextStyle(color: Colors.indigo, fontSize: 12.0),
            ),
            subtitle: Text(
              "Phnom Penh, Cambodia 12000",
              style: TextStyle(fontSize: 18.0),
            ),
          ),
          const Divider(),
        ],
      ),
    );
  }
}

The post user profile page using flutter – clean ui profile with source code first appeared on KHODECAM.

The post Php Signin With DB first appeared on KHODECAM.

1. connection.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$db = "khodecam";

// Create connection
$conn = new mysqli($servername, $username, $password,$db);

// Check connection
if ($conn->connect_error) {
	die("Connection failed: " . $conn->connect_error);
}
//echo "Connected successfully";
?>

2. banner.php

<?php 
include 'connection.php';
?>

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<title>Bootstrap Carousel With Php</title>
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto|Varela+Round">
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
	<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
	<!-- <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script> -->
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
	<style>
		body {
			margin:7% auto;
			background:#F4F6F7;
			font-family: 'Varela Round', sans-serif;
		}
		.web_banner{
			object-fit: cover;
			height:290px
		}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-md-8 offset-2">
				<div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
			<ol class="carousel-indicators">
				<li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
				<li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
			</ol>
			<div class="carousel-inner">
				<?php 
					$sql = "SELECT * FROM tbl_ads";
					$result = $conn->query($sql);
					if ($result->num_rows > 0) {
						$i=1;
					  while($row = $result->fetch_assoc()) {
					  	$active=$i==1?'active':'';
					    ?>
					    <div class='carousel-item <?php echo $active ?>'>
							<img src='<?php echo $row['adsBanner'] ?>' class='d-block w-100 web_banner' alt='<?php echo $row['adsTitle'] ?>'><div class='carousel-caption d-none d-md-block'>
								<h5><?php echo $row['adsTitle'] ?></h5>
								<p><?php echo $row['adsNote'] ?></p>
							</div>
						</div>
					    <?php
					   $i++;
					  }
					} else {
					  echo "0 results";
					}
					$conn->close();
				 ?>
			</div>
			<a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
				<span class="carousel-control-prev-icon" aria-hidden="true"></span>
				<span class="sr-only">Previous</span>
			</a>
			<a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
				<span class="carousel-control-next-icon" aria-hidden="true"></span>
				<span class="sr-only">Next</span>
			</a>
		</div>
			</div>
		</div>
	</div>
</body>
</html>

3. khodecam.sql

CREATE DATABASE IF NOT EXISTS `khodecam`
USE `khodecam`;

CREATE TABLE IF NOT EXISTS `tbl_ads` (
  `adsId` int(11) NOT NULL AUTO_INCREMENT,
  `adsTitle` char(100) DEFAULT NULL,
  `adsNote` char(150) DEFAULT NULL,
  `adsStatus` int(11) DEFAULT 1,
  `adsBanner` char(150) DEFAULT NULL,
  PRIMARY KEY (`adsId`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8mb4;

INSERT INTO `tbl_ads` (`adsId`, `adsTitle`, `adsNote`, `adsStatus`, `adsBanner`) VALUES
	(1, 'For Business', 'Dell for your business', 1, 'https://lzd-img-global.slatic.net/g/p/19586490c1371be316f66797bf10c235.png_2200x2200q80.jpg_.webp'),
	(2, 'For Gaming', 'Gaming Laptop for your future', 1, 'https://m.media-amazon.com/images/S/aplus-media-library-service-media/44a67512-fb9e-4efc-b0a6-b55b5f4dfd12.__CR0,0,1464,600_PT0_SX1464_V1___.jpg'),
	(3, 'For Industry', 'Best performance for your work', 1, 'https://www.evetech.co.za/repository/ProductImages/dell-intel-gaming-laptops-baner-980px-v1.jpg');

Result

The post Bootstrap carousel dynamic using PHP and MySql with source code first appeared on KHODECAM.