Mobile Screen Wallpaper 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: "UI Task",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        appBarTheme:
            const AppBarTheme(backgroundColor: Colors.grey, centerTitle: true),
      ),
      home: const TaskUi(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        return FocusManager.instance.primaryFocus?.unfocus();
      },
      child: Scaffold(
        body: SingleChildScrollView(
          child: Center(
            child: SizedBox(
              width: 360.0,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  const SizedBox(height: 100.0),
                  const SearchBar(),
                  Container(
                    padding: const EdgeInsets.only(
                        left: 10.0, top: 11.0, bottom: 11.0),
                    alignment: Alignment.centerLeft,
                    child: const Text(
                      "Best of the month",
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(width: 11.0),
                        Container(
                          width: 130.0,
                          height: 200.0,
                          decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                              color: Colors.blue),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 130.0,
                          height: 200.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.brown,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 130.0,
                          height: 200.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.teal,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 130.0,
                          height: 200.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.purple,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20.0),
                  Container(
                    padding: const EdgeInsets.all(11.0),
                    alignment: Alignment.centerLeft,
                    child: const Text(
                      "The color tone",
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 20.0),
                    ),
                  ),
                  SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: [
                        const SizedBox(width: 11.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.brown,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.blue,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.black,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.blueGrey,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.orange,
                          ),
                        ),
                        const SizedBox(width: 20.0),
                        Container(
                          width: 50.0,
                          height: 50.0,
                          decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(11.0),
                            color: Colors.teal,
                          ),
                        ),
                      ],
                    ),
                  ),
                  const SizedBox(height: 20.0),
                  Container(
                    alignment: Alignment.centerLeft,
                    padding: const EdgeInsets.all(11.0),
                    child: const Text(
                      "Categories",
                      style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 20.0),
                    ),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Stack(
                        children: [
                          Container(
                            width: 160.0,
                            height: 80.0,
                            clipBehavior: Clip.antiAlias,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                            ),
                            child: Image.asset("assets/images/Lord-Hanuman.jpg",
                                fit: BoxFit.cover),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(left: 40.0, top: 30.0),
                            child: Text(
                              "Hanuman",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                  color: Colors.white),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(width: 20.0),
                      Stack(
                        children: [
                          Container(
                            width: 160.0,
                            height: 80.0,
                            clipBehavior: Clip.antiAlias,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                            ),
                            child: Image.asset("assets/images/strawberry.png",
                                fit: BoxFit.cover),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(left: 40.0, top: 30.0),
                            child: Text(
                              "Strawberry",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                  color: Colors.white),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                  const SizedBox(height: 20.0),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Stack(
                        children: [
                          Container(
                            width: 160.0,
                            height: 80.0,
                            clipBehavior: Clip.antiAlias,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                            ),
                            child: Image.asset(
                                "assets/images/Business_Meeting_photo.jpg",
                                fit: BoxFit.cover),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(left: 40.0, top: 30.0),
                            child: Text(
                              "Meeting",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                  color: Colors.white),
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(width: 20.0),
                      Stack(
                        children: [
                          Container(
                            width: 160.0,
                            height: 80.0,
                            clipBehavior: Clip.antiAlias,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(11.0),
                            ),
                            child: Image.asset(
                                "assets/images/Natural_image.jpg",
                                fit: BoxFit.cover),
                          ),
                          const Padding(
                            padding: EdgeInsets.only(left: 40.0, top: 30.0),
                            child: Text(
                              "Nature",
                              style: TextStyle(
                                  fontWeight: FontWeight.bold,
                                  fontSize: 20.0,
                                  color: Colors.white),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 340.0,
      decoration: BoxDecoration(
        color: Colors.grey.withOpacity(0.2),
        borderRadius: BorderRadius.circular(11.0),
      ),
      child: TextFormField(
        decoration: InputDecoration(
          fillColor: Colors.grey,
          hintText: "Find Wallpapers",
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(11.0),
          ),

          suffixIcon: IconButton(
            onPressed: () {},
            icon: const Icon(Icons.search),
          ),
        ),
      ),
    );
  }
}

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