A sky camp layout recreation. https://dribbble.com/shots/11227931-The-best-camping-companion-for-your-smartphone

sky_camp_layout.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter_svg/flutter_svg.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        theme: ThemeData(fontFamily: 'Raleway'),
        home: Scaffold(
          body: Stack(
            children: <Widget>[
              Drawer(),
              Home(),
            ],
          ),
        ));
  }
}

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  double xOffset = 0;
  double yOffset = 0;
  double scaleFactor = 1;
  double radius = 0;
  bool isDrawerOpen = false;

  List<cardItem> cardList = cardData
      .map((item) => cardItem(
            image: item['image'],
            name: item['name'],
            arrowColor: item['arrowColor'],
          ))
      .toList();

  @override
  Widget build(BuildContext context) {
    return AnimatedContainer(
      transform: Matrix4.translationValues(xOffset, yOffset, 0)
        ..scale(scaleFactor),
      duration: Duration(milliseconds: 250),
      height: double.infinity,
      width: double.infinity,
      alignment: Alignment.topLeft,
      decoration: BoxDecoration(
          image: DecorationImage(
              image: AssetImage('assets/images/home.png'), fit: BoxFit.cover),
          borderRadius: BorderRadius.all(Radius.circular(radius))),
      child: SafeArea(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  isDrawerOpen
                      ? IconButton(
                          icon: Icon(
                            Icons.arrow_back,
                            color: Colors.white,
                          ),
                          onPressed: () {
                            setState(() {
                              xOffset = 0;
                              yOffset = 0;
                              scaleFactor = 1;
                              radius = 0;
                              isDrawerOpen = false;
                            });
                          })
                      : InkWell(
                          onTap: () {
                            setState(() {
                              xOffset = 230;
                              yOffset = 150;
                              scaleFactor = 0.6;
                              radius = 30;
                              isDrawerOpen = true;
                            });
                          },
                          child: SvgPicture.asset(
                            'assets/icons/menur.svg',
                            width: 12,
                            height: 12,
                            color: Colors.white,
                          ),
                        ),
                  Container(
                    padding: EdgeInsets.all(4),
                    child: SvgPicture.asset(
                      'assets/icons/boy.svg',
                      width: 40,
                      height: 40,
                    ),
                    decoration: BoxDecoration(
                        border: Border.all(
                            color: Colors.white.withOpacity(0.7),
                            width: 1,
                            style: BorderStyle.solid),
                        shape: BoxShape.circle),
                  ),
                  SvgPicture.asset(
                    'assets/icons/interface.svg',
                    width: 24,
                    height: 24,
                  )
                ],
              ),
            ),
            Container(
              margin: EdgeInsets.only(left: 30, right: 30, top: 30, bottom: 10),
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  color: searchBackground.withOpacity(0.9),
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              padding: EdgeInsets.all(20),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  SvgPicture.asset(
                    'assets/icons/zoom.svg',
                    width: 18,
                    height: 18,
                    color: Colors.white,
                  ),
                  SizedBox(
                    width: 12,
                  ),
                  Text(
                    'Search ...',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                        fontWeight: FontWeight.w600),
                  )
                ],
              ),
            ),
            IconButton(
                icon: Icon(Icons.keyboard_arrow_down),
                iconSize: 32,
                color: Colors.white,
                onPressed: () {}),
            Spacer(),
            Container(
              alignment: Alignment.topLeft,
              margin: EdgeInsets.only(left: 30),
              child: Text(
                'Discover',
                style: TextStyle(
                    letterSpacing: 0.9,
                    color: Colors.white,
                    fontSize: 26,
                    fontWeight: FontWeight.w800),
              ),
            ),
            SizedBox(
              height: 20,
            ),
            SizedBox(
              height: 190,
              child: ListView.builder(
                padding: EdgeInsets.only(bottom: 40),
                itemBuilder: (context, index) {
                  return Stack(
                    overflow: Overflow.visible,
                    children: <Widget>[
                      Container(
                        height: 160,
                        width: 130,
                        margin: EdgeInsets.only(right: 12),
                        alignment: Alignment.center,
                        decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius:
                                BorderRadius.all(Radius.circular(12))),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            SvgPicture.asset(
                              cardList[index].image,
                              width: 60,
                              height: 60,
                            ),
                            SizedBox(
                              height: 12,
                            ),
                            Text(
                              cardList[index].name,
                              style: TextStyle(fontWeight: FontWeight.w900),
                            ),
                          ],
                        ),
                        padding: EdgeInsets.all(30),
                      ),
                      Positioned(
                        bottom: -18,
                        right: 58,
                        child: Container(
                          alignment: Alignment.center,
                          padding: EdgeInsets.all(6),
                          decoration: BoxDecoration(
                              color: cardList[index].arrowColor,
                              borderRadius:
                                  BorderRadius.all(Radius.circular(8))),
                          child: Icon(Icons.keyboard_arrow_right),
                        ),
                      ),
                    ],
                  );
                },
                scrollDirection: Axis.horizontal,
                itemCount: cardList.length,
              ),
            ),
            // SizedBox(height: 40),
          ],
        ),
      ),
    );
  }
}

class Drawer extends StatefulWidget {
  @override
  _DrawerState createState() => _DrawerState();
}

class _DrawerState extends State<Drawer> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: searchBackground,
    );
  }
}

class cardItem {
  final String image;
  final String name;
  final Color arrowColor;

  cardItem({this.image, this.name, this.arrowColor});
}

var cardData = [
  {
    "image": "assets/icons/fireworks.svg",
    "name": "Camps",
    "arrowColor": card1Background
  },
  {
    "image": "assets/icons/activities.svg",
    "name": "Activities",
    "arrowColor": card2Background
  },
  {
    "image": "assets/icons/fireworks2.svg",
    "name": "Cooking",
    "arrowColor": card3Background
  },
];

const searchBackground = Color(0xff3B2A9D);
const card1Background = Color(0xfff0bc5e);
const card2Background = Color(0xffFFB085);
const card3Background = Color(0xffCF6CF8);