gmail_clone

A new Flutter application to showcase how to build Gmail with Flutter.

Video Tutorial: YouTube

Screenshots

Example

import 'package:floating_search_bar/floating_search_bar.dart';
import 'package:flutter/material.dart';
import 'package:gmail_clone/ui/app/app.dart';
import 'package:responsive_scaffold/responsive_scaffold.dart';
import 'package:responsive_scaffold/utils/breakpoint.dart';

import '../data/classes/email.dart';
import '../data/dummy_data.dart';
import 'common/common.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<EmailItem> _emails;
  @override
  void initState() {
    _emails = emails;
    super.initState();
  }

  final Size _tabletBreakpoint = Size(510.0, 510.0);

  @override
  Widget build(BuildContext context) {
    final bool _tablet = isTablet(context, breakpoint: _tabletBreakpoint);
    return ResponsiveScaffold.builder(
      tabletBreakpoint: _tabletBreakpoint,
      detailBuilder: (BuildContext context, int index) {
        final i = _emails[index];
        return DetailsScreen(
          appBar: AppBar(
            elevation: 0.0,
            actions: [
              IconButton(
                icon: Icon(Icons.archive),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.delete_outline),
                onPressed: () {
                  setState(() {
                    _emails.removeAt(index);
                  });
                },
              ),
              IconButton(
                icon: Icon(Icons.mail_outline),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.more_horiz),
                onPressed: () {},
              ),
            ],
          ),
          body: EmailView(
            item: i,
            favoriteChanged: () {
              setState(() {
                i.favorite = !i.favorite;
              });
            },
          ),
        );
      },
      drawer: AppDrawer(),
      tabletSideMenu: _tablet
          ? Flexible(
              flex: 1,
              child: AppSideMenu(),
            )
          : null,
      tabletFlexListView: 4,
      slivers: <Widget>[
        SliverFloatingBar(
          floating: true,
          automaticallyImplyLeading: !_tablet,
          title: TextField(
            decoration: InputDecoration.collapsed(hintText: "Search mail"),
          ),
          trailing: CircleAvatar(
            child: Text("RD"),
          ),
        ),
        SliverToBoxAdapter(
          child: Container(
            padding: EdgeInsets.all(12.0),
            child: Text("All Inboxes"),
          ),
        ),
      ],
      itemCount: _emails?.length ?? 0,
      itemBuilder: (BuildContext context, int index) {
        final i = _emails[index];
        final bool _lastItem = (index + 1) == emails?.length ?? 0;
        if (_lastItem) {
          return Container(
            padding: EdgeInsets.only(bottom: 70.0),
            child: EmailListTile(
              item: i,
              favoriteChanged: () {
                setState(() {
                  i.favorite = !i.favorite;
                });
              },
            ),
          );
        }
        return EmailListTile(
          item: i,
          favoriteChanged: () {
            setState(() {
              i.favorite = !i.favorite;
            });
          },
        );
      },
      floatingActionButton: EmailFAB(),
    );
  }
}