Whatsapp Clone Light Theme

whatsapp-clone-light-theme.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Color(0xff075E54),
        indicatorColor: Colors.white,
        textTheme: TextTheme(
            bodyText2: TextStyle(
          fontSize: 30.0,
        )),
        primaryIconTheme: IconThemeData(
          color: Colors.white,
        ),
        primaryTextTheme: TextTheme(
            headline6: TextStyle(color: Colors.white),
            bodyText1: TextStyle(
              fontWeight: FontWeight.bold,
              ),),),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double width = MediaQuery.of(context).size.width;
    return DefaultTabController(
      length: 4,
      initialIndex: 1,
      child: Scaffold(
        appBar: AppBar(
          title: Text("WhatsApp"),
          actions: <Widget>[
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              child: IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 8.0),
              child: IconButton(
                icon: Icon(Icons.more_vert),
                onPressed: () {},
              ),
            ),
          ],
          bottom: TabBar(
            isScrollable: true,
            tabs: <Widget>[
              Container(
                child: Tab(icon: Icon(Icons.camera_alt)),
              ),
              Container(
                child: Tab(text: 'CHATS'),
                width: (width * 0.2),
              ),
              Container(
                child: Tab(text: 'STATUS'),
                width: (width * 0.2),
              ),
              Container(
                child: Tab(text: 'CALLS'),
                width: (width * 0.2),
              ),
            ],
          ),
        ),
        body: TabBarView(
          children: <Widget>[
            Container(
              child: Center(
                child: Icon(
                  Icons.camera_alt,
                  size: 150.0,
                ),
              ),
            ),
            Center(child: Text('Chats')),
            Center(child: Text('Status')),
            Center(child: Text('Calls')),
          ],
        ),
      ),
    );
  }
}

whatsapp-clone-light-theme.markdown

Whatsapp Clone Light Theme

A Pen by Sripal K Jain on CodePen.

License.