how to make facebook lite ui clone on flutter || Programmer hubs just for Programmer|| Rohit Sharma

ROHIT SHARMA 17 August

 Hey Guys... Today I Discuss  how to make facebook lite ui clone on flutter || Programmer hubs just for Programmer|| Rohit Sharma

Let's Open VSCODE or android studio 

first create project through Command prompt

  1. winkey + R and type cmd then Enter
  2. open a command prompt then after type  flutter create project_name
Then After open the folder with vs Code 

Code Part :- Main.dart

import 'package:facebbok/widget.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: appbar(context),
        elevation: 0.0,
        backgroundColor: Colors.white,
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            color: Colors.deepOrange,
            iconSize: 30,
            onPressed: null,
          ),
          IconButton(
            icon: Icon(Icons.person),
            color: Colors.black,
            iconSize: 30,
            onPressed: null,
          )
        ],
      ),
      body: Container(
        child: Column(
          children: [
            new Container(
              height: 40.0,
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  IconButton(
                    icon: Icon(Icons.home),
                    onPressed: () {},
                    iconSize: 30.0,
                    color: Colors.black,
                  ),
                  IconButton(
                    icon: Icon(Icons.person_add),
                    onPressed: () {},
                    iconSize: 30.0,
                    color: Colors.black,
                  ),
                  IconButton(
                    icon: Icon(Icons.message),
                    onPressed: () {},
                    color: Colors.black,
                    iconSize: 30.0,
                  ),
                  IconButton(
                    icon: Icon(Icons.notifications),
                    onPressed: () {},
                    color: Colors.black,
                    iconSize: 30.0,
                  ),
                  IconButton(
                    icon: Icon(Icons.menu),
                    onPressed: () {},
                    color: Colors.black,
                    iconSize: 30.0,
                  ),
                ],
              ),
            ),
            Divider(thickness: 0.5, height: 10.0),
            new Container(
              height: 50.0,
              margin: EdgeInsets.fromLTRB(5, 5, 5, 0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  CircleAvatar(),
                  Expanded(
                    child: TextField(
                      decoration:
                          InputDecoration(hintText: "What's on your mind ?"),
                    ),
                  )
                ],
              ),
            ),
            Divider(
              height: 10.0,
              thickness: 0.5,
            ),
            new Container(
              height: 40.0,
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    FlatButton.icon(
                        onPressed: () {},
                        icon: Icon(
                          Icons.videocam,
                          color: Colors.red,
                        ),
                        label: Text('Live')),
                    FlatButton.icon(
                        onPressed: () {},
                        icon: Icon(
                          Icons.photo_library,
                          color: Colors.green,
                        ),
                        label: Text('Photos')),
                    FlatButton.icon(
                        onPressed: () {},
                        icon: Icon(
                          Icons.video_call,
                          color: Colors.purple,
                        ),
                        label: Text('Room'))
                  ]),
            )
          ],
        ),
      ),
    );
  }
}                                                      

Code Part :-Widget.dart        

import 'package:flutter/material.dart';

Widget appbar(BuildContext context) {
  return RichText(
      text: TextSpan(
          style: TextStyle(fontSize: 28, letterSpacing: -0.5),
          children: <TextSpan>[
        TextSpan(
            text: 'facebook',
            style: TextStyle(color: Colors.blue, fontWeight: FontWeight.w900))
      ]));
}

             how to make facebook lite ui clone on flutter || Programmer hubs just for Programmer|| Rohit Sharma            

Tags:

Post a Comment

1 Comments

thanks for your suggestion and improving quality of the content