beautiful_ui.dart

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

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: const Color(0xffe4e6e6),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 25, vertical: 30),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              // This container Contains Profile Image of User, Nothing more,
              Container(
                height: 60,
                width: 60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.white,
                  boxShadow: myCustomShadow,
                ),
                child: Center(
                  child: Container(
                    height: 50,
                    width: 50,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(25),
                      color: Colors.red,
                      image: const DecorationImage(
                        fit: BoxFit.cover,
                        image: NetworkImage(
                          'https://www.jeancoutu.com/globalassets/revamp/photo/conseils-photo/20160302-01-reseaux-sociaux-profil/photo-profil_301783868.jpg',
                        ),
                      ),
                    ),
                  ),
                ),
              ),

              /// The following Container contains the Icon for notificatios,
              Container(
                height: 60,
                width: 60,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  color: Colors.white,
                  boxShadow: myCustomShadow,
                ),
                child: Center(
                  child: Container(
                    height: 50,
                    width: 50,
                    child: const Icon(Icons.notification_important_rounded,
                        size: 26),
                  ),
                ),
              ),
            ], // Top row for profile and notification icon ended here ,
          ),
          //contenue Text widget iln the column below.
          vertical(30),
          Text(
            'Discover \na New World',
            style: GoogleFonts.dmSans(
              fontSize: 45,
              color: Colors.black,
              fontWeight: FontWeight.w500,
            ),
          ), // Discover Text Ended here,
          // Continue building custom InputTestField below ,with search icon
          vertical(40),
          Container(
            margin: const EdgeInsets.only(right: 15),
            height: 80,
            width: double.maxFinite,
            decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: myCustomShadow,
                borderRadius: BorderRadius.circular(20)),
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(children: [
                horizontal(20),
                Expanded(
                  flex: 4,
                  child: Text(
                    'Country, Location...',
                    style: GoogleFonts.dmSans(
                      color: Colors.black54,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
                Container(height: 80, width: 1, color: Colors.black12),
                const Expanded(
                  child: Icon(
                    Icons.search_rounded,
                    color: Colors.black54,
                    size: 28,
                  ),
                ),
              ]), //This is the end of the custom input field container, input not working just ui and frontend ,
            ),
          ),
          vertical(30),
          Text(
            'Popular',
            style: GoogleFonts.dmSans(
              fontSize: 28,
              fontWeight: FontWeight.bold,
            ),
          ),
          vertical(30),

          SingleChildScrollView(
            padding: const EdgeInsets.symmetric(vertical: 20),
            scrollDirection: Axis.horizontal,
            controller: ScrollController(keepScrollOffset: true),
            child: Row(
              children: [
                CustomChip(
                    imgUrl:
                        'https://st.depositphotos.com/1011976/3857/i/600/depositphotos_38578719-stock-photo-beautiful-mountains.jpg',
                    text: 'Mountains'),
                CustomChip(
                    imgUrl:
                        'https://hips.hearstapps.com/hbz.h-cdn.co/assets/16/17/1600x2408/maho-bay-st-john.jpg?resize=480:*',
                    text: 'Beach'),
                CustomChip(
                    imgUrl:
                        'https://i.insider.com/5db20821045a3157903e54c3?width=1000&format=jpeg&auto=webp',
                    text: 'City'),
                CustomChip(
                    imgUrl:
                        'https://i.insider.com/5db20821045a3157903e54c3?width=1000&format=jpeg&auto=webp',
                    text: 'City'),
              ],
            ),
          ),
          vertical(30),
          Row(
            children: [
              Text(
                'Upcoming',
                style: GoogleFonts.dmSans(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                ),
              ),
              horizontal(30),
              Text(
                'Recents',
                style: GoogleFonts.dmSans(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.black54,
                ),
              ),
            ],
          ),
          vertical(20),
          SingleChildScrollView(
            padding: const EdgeInsets.symmetric(vertical: 20),
            scrollDirection: Axis.horizontal,
            controller: ScrollController(keepScrollOffset: true),
            child: Row(
              children: [
                PlaceCard(
                  imageUrl:
                      'https://st.depositphotos.com/1011976/3857/i/600/depositphotos_38578719-stock-photo-beautiful-mountains.jpg',
                  title: 'My Place',
                  date: '10 May 25',
                ),
                   PlaceCard(
                  imageUrl:
                      'https://images.pexels.com/photos/3358880/pexels-photo-3358880.png?auto=compress&cs=tinysrgb&dpr=1&w=500',
                  title: 'My Place',
                  date: '10 May 25',
                ),
                   PlaceCard(
                  imageUrl:
                      'https://imagesvc.meredithcorp.io/v3/mm/image?q=60&c=sc&poi=face&w=1600&h=800&url=https%3A%2F%2Fstatic.onecms.io%2Fwp-content%2Fuploads%2Fsites%2F28%2F2018%2F05%2FVinicunca-Mountain-Andes-PERURNBW0518.jpg',
                  title: 'My Place',
                  date: '10 May 25',
                ),
                   PlaceCard(
                  imageUrl:
                      'https://st.depositphotos.com/1011976/3857/i/600/depositphotos_38578719-stock-photo-beautiful-mountains.jpg',
                  title: 'My Place',
                  date: '10 May 25',
                ),
              ],
            ),
          ),
        ], //main column , do whatever but do not cross this bracket.
      ),
    );
  }
}

//Custome Componernts

class CustomChip extends StatelessWidget {
  final String imgUrl;
  final String text;
  CustomChip({required this.imgUrl, required this.text});
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(right: 20),
      padding: const EdgeInsets.only(right: 8),

//       width: 220,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: myCustomShadow,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
            margin: const EdgeInsets.all(8),
            height: 60,
            width: 60,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(18),
              image: DecorationImage(
                image: NetworkImage(
                  imgUrl,
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          horizontal(5),
          Text(
            text,
            style: GoogleFonts.nunito(
              fontWeight: FontWeight.bold,
              fontSize: 18,
            ),
          ),
        ],
      ),
    );
  }
}

class PlaceCard extends StatelessWidget {
  final String imageUrl;
  final String title;
  final String date;
  PlaceCard({
    required this.imageUrl,
    required this.title,
    required this.date,
  });
  @override
  Widget build(BuildContext context) {
    return Container(
      margin : EdgeInsets.only(right: 20),
      padding: const EdgeInsets.all(8),
//       width: 220,
      decoration: BoxDecoration(
        color: Colors.white,
        boxShadow: myCustomShadow,
        borderRadius: BorderRadius.circular(20),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        children: [
          Container(
//             margin: const EdgeInsets.all(8),
            height: 160,
            width: 160,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(18),
              image: DecorationImage(
                image: NetworkImage(
                  imageUrl,
                ),
                fit: BoxFit.cover,
              ),
            ),
          ),
          vertical(18),
          Container(
            margin: const EdgeInsets.only(left: 10),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    Text(
                      title,
                      style: GoogleFonts.nunito(
                        fontWeight: FontWeight.bold,
                        fontSize: 16,
                      ),
                    ),
                    const Icon(Icons.chevron_right),
                  ],
                ),
                Text(
                  date,
                  style: GoogleFonts.nunito(
                    fontWeight: FontWeight.bold,
                    fontSize: 16,
                    color: Colors.black38,
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

//Reusaable code is below

Widget vertical(double value) => SizedBox(height: value);
Widget horizontal(double value) => SizedBox(width: value);

List<BoxShadow> myCustomShadow = const [
  BoxShadow(
    color: Colors.grey,
    blurRadius: 15,
    spreadRadius: 1,
    offset: Offset(1, 1),
  ),
  BoxShadow(
    color: Colors.white38,
    blurRadius: 15,
    spreadRadius: 1,
    offset: Offset(-1, -1),
  ),
];//*********************************************************END\\\\\\\\\\\\\..........LEAVE YOUR FEEDBACK PLEASE -----------=============0000000000555555555........,<<<<<<<<

redme.md

Try this code on dartpad first,

• Try code here
• please note that this code is not responsive , and coded in bigger screen.
• so if you have any size issue please reduce the size of the chorme window to 80% to 70% and run again ,
• ui design