import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  final Color _black = Color(0xFF3B3B3B);
  final Color _grey = Color(0xFFA9A9B0);
//final Color _blue = Color(0xFF118DF0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Fliply',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Column(
          children: <Widget>[
            _topBar(),
            SearchBar(),
            _filterBar(),
            Categories(),
          ],
        ),
      ),
    );
  }

  Widget _topBar() {
    return AppBar(
      elevation: 0.0,
      backgroundColor: Colors.white,
      title: Container(
        child: Row(
          children: <Widget>[
            Icon(
              Icons.location_on,
              color: _black,
            ),
            SizedBox(width: 4.0),
            Text(
              'CHENNAI, INDIA',
              style: TextStyle(
                fontFamily: 'SF-Pro-Display',
                fontSize: 18.0,
                fontWeight: FontWeight.w500,
                color: _black,
              ),
            ),
            Spacer(),
            IconButton(
              icon: Icon(
                Icons.notifications,
                color: _black,
              ),
              onPressed: () {},
            )
          ],
        ),
      ),
    );
  }

  Widget _filterBar() {
    return Container(
      margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Text(
            'Recently Added',
            style: TextStyle(
              fontSize: 30.0,
              fontWeight: FontWeight.bold,
              color: _black,
            ),
          ),
          IconButton(
            icon: Icon(
              Icons.filter_list,
              color: _grey,
              size: 34.0,
            ),
            onPressed: () {},
          )
        ],
      ),
    );
  }
}

class SearchBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 25.0),
      margin: EdgeInsets.fromLTRB(10.0, 5.0, 15.0, 15.0),
      decoration: BoxDecoration(
        color: Colors.grey.shade100,
        borderRadius: BorderRadius.circular(30.0),
      ),
      child: TextField(
        decoration: InputDecoration(
          border: InputBorder.none,
          hintText: 'What are you looking for?',
          hintStyle: TextStyle(
            fontSize: 16.0,
            color: Colors.grey,
          ),
          suffixIcon: Icon(
            Icons.search,
            color: Colors.black54,
          ),
        ),
      ),
    );
  }
}

class Categories extends StatefulWidget {
  @override
  _CategoriesState createState() => _CategoriesState();
}

class _CategoriesState extends State<Categories>
    with SingleTickerProviderStateMixin {
  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(vsync: this, length: 6);
  }

  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.only(left: 10.0),
      child: TabBar(
        controller: tabController,
        isScrollable: true,
        indicatorColor: Colors.blue,
        indicatorSize: TabBarIndicatorSize.label,
        indicatorWeight: 2.0,
        labelColor: Colors.black,
        unselectedLabelColor: Colors.grey,
        tabs: <Widget>[
          Tab(
            child: Text(
              'All',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          Tab(
            child: Text(
              'Cars',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          Tab(
            child: Text(
              'Electronics',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          Tab(
            child: Text(
              'Clothing',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
          Tab(
            child: Text(
              'Home',
              style: TextStyle(
                fontWeight: FontWeight.w300,
                fontSize: 16.0,
              ),
            ),
          ),
          Tab(
            child: Text(
              'Accessories',
              style: TextStyle(
                fontSize: 16.0,
                fontWeight: FontWeight.w300,
              ),
            ),
          ),
        ],
      ),
    );
  }
}