Design Timeline Page using Flutter

 

Design Timeline Page using Flutter

Final Code:

import 'package:flutter/cupertino.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';

class Timeline_Page extends StatefulWidget{
  Timeline_PageState createState()=> Timeline_PageState();
}

class Timeline_PageState extends State<Timeline_Page>{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
        initialIndex: 0,     // default is 0
        length: 4,           // Number of Tabs
      child: Scaffold(
          appBar: AppBar(title:Text("joe_root"),
            backgroundColor: Colors.indigoAccent,
            actions: [IconButton(
                icon: Icon(Icons.send_outlined,), onPressed: ()=>{})],),
        body: SingleChildScrollView(
          child: Column( crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.max,
          children: [
            SizedBox(height: 15),
            Row(children: [
              SizedBox(width: 15,),
              CircleAvatar(
                radius: 35,
                backgroundColor: Colors.grey.shade200,
                child: Icon(Icons.person,color: Colors.black,),),
              SizedBox(width: 15),
              Column(crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                Text("Joe Root ",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 20),),
                SizedBox(height: 4,),
                Text("Los Angeles, California",style: TextStyle(fontSize: 16),),
              ],)
            ],),
            SizedBox(height: 15,),
            Row(children: [
              SizedBox(width: 22,),Text("BIO\nBIO HERE",style: TextStyle(fontSize: 16,fontWeight: FontWeight.bold),)
            ],),
            SizedBox(height: 5,),
            Container(color:Colors.grey.shade100,
              height: 50,
              child: TabBar(labelColor: Colors.black,
              tabs: [
                Tab(text: 'About',
                  icon: Icon(Icons.account_box_outlined,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Posts',
                  icon: Icon(Icons.post_add,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0),),
                Tab(text: 'Q/A',
                    icon: Icon(Icons.question_answer,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 0.0)),
                Tab(text: 'Mates',
                    icon: Icon(Icons.people,
                      color: Colors.indigo,),
                      iconMargin: EdgeInsets.only(bottom: 3.0))
              ],),),
            SizedBox(
              height: 300,
              child: TabBarView(dragStartBehavior:DragStartBehavior.start,
                    children: [
                      Center(child:Text("About Section")),
                      Center(child:Text("Posts Section")),
                      Center(child:Text("Q/A Section")),
                      Center(child:Text("Mates Section"))],)
            ),
          ],),
      ),
    ));
  }
}

Final Screen:

For queries or any other help related to flutter or dart feel free to ask in the comments😊