main.dart

///This is a learning exaple that discusses the TabBarView Widget and the GridView.count widget too

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          title: Text("Tabs Example"),
          centerTitle: true,
          flexibleSpace: Image.network(
            "https://previews.123rf.com/images/aberration/aberration1104/aberration110400003/9246112-blue-abstract-smoke-pattern-on-a-black-background.jpg",
            fit: BoxFit.cover,
          ),
          bottom: TabBar(
            tabs: <Widget>[
              Tab(
                icon: Icon(Icons.home),
                text: "Home",
              ),
              Tab(
                icon: Icon(Icons.contact_mail),
                text: "Contacts",
              ),
            ],
          ),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              title: Text("Home"),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.contact_mail),
              title: Text("Contacts"),
            ),
          ],
        ),
        body: TabBarView(
          children: <Widget>[
            Container(
              color: Colors.grey[400],
              child: GridView.count(
                crossAxisCount: 2,
                childAspectRatio: 1.0,
                crossAxisSpacing: 10.0,
                mainAxisSpacing: 10.0,
                shrinkWrap: true,
                padding: EdgeInsets.symmetric(
                  horizontal: 10.0,
                  vertical: 10.0,
                ),
                children: <Widget>[
                  for (int i = 0; i < 10; i++)
                    Card(
                      shape: CircleBorder(),
                      child: Container(
                        color: Colors.white,
                        child: Center(
                          child: Text(
                            i.toString(),
                            style: Theme.of(context).textTheme.headline4,
                          ),
                        ),
                      ),
                    )
                ],
              ),
            ),

            ///++++++++++++++++++++++++++++++
            Container(
              color: Colors.red,
              child: Center(
                child: Text("Home"),
              ),
            ),

            ///++++++++++++++++++++++++++++++++++++
          ],
        ),
      ),
    );
  }
}