Mobile Screen Simple UI

 import 'package:flutter/material.dart';


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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Complete UI",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme:
            const AppBarTheme(backgroundColor: Colors.grey, centerTitle: true),
      ),
      home: const WallpaperApp(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        return FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        body: SingleChildScrollView(
          child: Column(
            children: [
              const SizedBox(height: 100),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    height: 55,
                    width: 380,
                    decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(12),
                        color: Colors.grey.withOpacity(.2)),
                    child: const Padding(
                      padding: EdgeInsets.only(left: 30, top: 4),
                      child: TextField(
                        keyboardType: TextInputType.text,
                        decoration: InputDecoration(
                          hintText: "Find Wallpapers...",
                          hintStyle: TextStyle(color: Colors.grey),
                          border: InputBorder.none,
                          suffixIcon: Icon(
                            Icons.search,
                            color: Colors.grey,
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              const Row(
                children: [
                  SizedBox(width: 20),
                  Text(
                    "Best of the month",
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
              const SizedBox(height: 20),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    const SizedBox(width: 20),
                    Container(
                      clipBehavior: Clip.antiAlias,
                      height: 200,
                      width: 160,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Image.network(
                        "https://i.pinimg.com/236x/29/87/d7/2987d729ee4168964075f1b4234f67f0.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                    const SizedBox(width: 15),
                    Container(
                      clipBehavior: Clip.antiAlias,
                      height: 200,
                      width: 160,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Image.network(
                        "https://i.pinimg.com/originals/f3/ed/ee/f3edeef287ab6c4ea59b9c971a410f47.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                    const SizedBox(width: 15),
                    Container(
                      clipBehavior: Clip.antiAlias,
                      height: 200,
                      width: 160,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(15),
                      ),
                      child: Image.network(
                        "https://marketplace.canva.com/EAFJkDYXxQg/1/0/900w/canva-dragon-illustration-black-white-phone-wallpaper-TembgGxUe-E.jpg",
                        fit: BoxFit.cover,
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              const Row(
                children: [
                  SizedBox(width: 20),
                  Text(
                    "The color tone",
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
              const SizedBox(height: 15),
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Row(
                  children: [
                    const SizedBox(width: 20),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.red),
                    ),
                    const SizedBox(width: 10),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.blue),
                    ),
                    const SizedBox(width: 10),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.purple),
                    ),
                    const SizedBox(width: 10),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.greenAccent),
                    ),
                    const SizedBox(width: 10),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.black),
                    ),
                    const SizedBox(width: 10),
                    Container(
                      height: 60,
                      width: 60,
                      decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(6),
                          color: Colors.blue),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 20),
              const Row(
                children: [
                  SizedBox(width: 20),
                  Text(
                    "Categories",
                    style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                  ),
                ],
              ),
              const SizedBox(
                height: 10,
              ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Stack(
                      children: [
                        Container(
                          clipBehavior: Clip.antiAlias,
                          height: 100,
                          width: 180,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Image.network(
                            "https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTExL3Jhd3BpeGVsb2ZmaWNlMTBfYWJzdHJhY3RfY29sb3VyZnVsX2ZlYXRoZXJzX2JhY2tncm91bmRfX2hpbnRfb19iZTkwMjRkZS04YWQ2LTQ2NzYtYmJmMS1jNmIyNmJiY2FkNWJfMS5qcGc.jpg",
                            fit: BoxFit.cover,
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(left: 50, top: 35),
                          child: Text(
                            "Abstract",
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )
                      ],
                    ),
                    Stack(
                      children: [
                        Container(
                          clipBehavior: Clip.antiAlias,
                          height: 100,
                          width: 180,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Image.network(
                            "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg",
                            fit: BoxFit.cover,
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(left: 50, top: 35),
                          child: Text(
                            "Nature",
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 10),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 12),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    Stack(
                      children: [
                        Container(
                          clipBehavior: Clip.antiAlias,
                          height: 100,
                          width: 180,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Image.network(
                            "https://images.rawpixel.com/image_800/cHJpdmF0ZS9sci9pbWFnZXMvd2Vic2l0ZS8yMDIzLTExL3Jhd3BpeGVsb2ZmaWNlMTBfYWJzdHJhY3RfY29sb3VyZnVsX2ZlYXRoZXJzX2JhY2tncm91bmRfX2hpbnRfb19iZTkwMjRkZS04YWQ2LTQ2NzYtYmJmMS1jNmIyNmJiY2FkNWJfMS5qcGc.jpg",
                            fit: BoxFit.cover,
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(left: 50, top: 35),
                          child: Text(
                            "Abstract",
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )
                      ],
                    ),
                    Stack(
                      children: [
                        Container(
                          clipBehavior: Clip.antiAlias,
                          height: 100,
                          width: 180,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(15),
                          ),
                          child: Image.network(
                            "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg",
                            fit: BoxFit.cover,
                          ),
                        ),
                        const Padding(
                          padding: EdgeInsets.only(left: 50, top: 35),
                          child: Text(
                            "Nature",
                            style: TextStyle(
                                fontSize: 20,
                                color: Colors.white,
                                fontWeight: FontWeight.bold),
                          ),
                        )
                      ],
                    ),
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Comments

Post a Comment

Popular posts from this blog

Pagination with Bloc Pattern in Flutter

Image
  import "package:flutter/material.dart" ; import "package:flutter_bloc/flutter_bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/bloc.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/event.dart" ; import "package:pagination_practice/Pagination_with_Bloc/Bloc/state.dart" ; import "package:pagination_practice/Pagination_with_Bloc/post_repo.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return RepositoryProvider < PostRepo >( create: ( context ) => PostRepo () , child: BlocProvider < PostBloc > ( create: ( context ) => PostBloc ( context.read < PostRepo > () ) ..add ( FetchPostsEvent () ) , child: MaterialApp ( title: "Pagination" , debugShowCheckedModeBa...
Read more

Pagination First Practical in Flutter

Image
  import "package:dio/dio.dart" ; import "package:flutter/material.dart" ; import "package:flutter_spinkit/flutter_spinkit.dart" ; import "package:pagination_practice/Pagination/Model/productModel.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "HomePage" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const HomePage () , ) ; } } class HomePage extends StatefulWidget { const HomePage ( { super .key } ) ; @override State < HomePage > createState () { return HomePageState () ; } } class HomePageState extends State < HomePage > { final ScrollController scrollController = Scrol...
Read more

ExpansionPanel with ExpansionPanelList with Complete Collapse Operation in Flutter

Image
  import "package:flutter/material.dart" ; import "package:sdreatech_learning_widget/All_widgets_Ui/customWidget.dart" ; void main () { runApp ( const MyApp () ) ; } class MyApp extends StatelessWidget { const MyApp ( { super .key } ) ; @override Widget build ( BuildContext context ) { return MaterialApp ( title: "ExpansionPanel" , debugShowCheckedModeBanner: false, theme: ThemeData ( appBarTheme: const AppBarTheme ( backgroundColor: Colors. grey , centerTitle: true, ) , ) , home: const ExpansionPanelListPracticalCollapseTask () , ) ; } } class ExpansionPanelListPracticalCollapseTask extends StatefulWidget { const ExpansionPanelListPracticalCollapseTask ( { super .key } ) ; @override State < ExpansionPanelListPracticalCollapseTask > createState () => _ExpansionPanelListPracticalCollapseTaskState () ; } class _ExpansionPanelListPracticalCollapseTaskState...
Read more