import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class LandingPage extends StatefulWidget {
  const LandingPage({Key? key}) : super(key: key);
  @override
  State<LandingPage> createState() => _LandingPageState();
}

class _LandingPageState extends State<LandingPage> {



  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Padding(
                padding: EdgeInsets.fromLTRB(16,15,16,0),
                child: Text("Gallery",style: TextStyle(fontSize: 30,fontWeight: FontWeight.w900),),
              ),
              Padding(
                padding: EdgeInsets.fromLTRB(16,15,16,0),
                child: CircleAvatar(
                  backgroundImage: AssetImage('assets/images/pic.jpg'),
                ),
              )
            ],
          ),
          SizedBox(
            height: 20,
          ),
          SizedBox(
            width: 350,
            child: TextField(
              decoration: InputDecoration(
                contentPadding: EdgeInsets.symmetric(vertical: 12),
                hintText: "Search",
                hintStyle: TextStyle(color: Colors.black,fontWeight: FontWeight.w500),
                fillColor: Color.fromRGBO(228, 230, 232, 100),
                filled: true,
                prefixIcon: Icon(Icons.search),
                enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(30),borderSide: BorderSide(color: Colors.transparent)),
                focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(30),
                borderSide: const BorderSide(color: Colors.transparent)),

              ),
            ),
          ),
          SizedBox(
            height: 15,
          ),
          Expanded(
            flex: 2,
              child: Stack(
                alignment: Alignment.bottomLeft,
            children: [
              Container(
                decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), color: Colors.indigo,),
                width: 320,
              ),
              Positioned(
                left: 70,
                bottom: 30,
                child: SizedBox(
                    width: 180,
                    height: 180,
                    child: Image(image: AssetImage('assets/images/casette.png'))),
              ),
              const Positioned(
                top: 120,
                left: 20,
                child: Column(
                  crossAxisAlignment:CrossAxisAlignment.start,
                  children: [
                    Text('Music',style:GoogleFonts()),
                    Text('45 Photos',style: TextStyle(fontSize: 15,color: Colors.white),)
                  ],
                ),
              )
            ],
          )),
          SizedBox(
            height: 15,
          ),
          Expanded(
              flex: 2,
              child: Stack(
                alignment: Alignment.bottomLeft,
                children: [
                  Container(
                    decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), color: Colors.orange,),
                    width: 320,

                  ),
                  const Positioned(
                    left: 85,
                    bottom: 30,
                    child: SizedBox(
                        width: 150,
                        height: 160,
                        child: Image(image: AssetImage('assets/images/parachute.png'))),
                  ),
                  const Positioned(
                    top: 120,
                    left: 20,
                    child: Column(
                      crossAxisAlignment:CrossAxisAlignment.start,
                      children: [
                        Text('Sky',style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.w900),),
                        Text('30 Photos',style: TextStyle(fontSize: 15,color: Colors.white),)
                      ],
                    ),
                  )
                ],
              )),

          Expanded(
            flex: 1,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                IconButton(onPressed: (){}, color: Colors.grey,icon: Icon(Icons.folder)),
                IconButton(onPressed: (){} ,color: Colors.grey, icon: Icon(Icons.center_focus_weak)),
                IconButton(onPressed: (){}, color: Colors.grey,icon: Icon(Icons.favorite_border_outlined)),
              ],
            ),
          ),
        ],
      ),


    );
  }
}