YouTube UI|NavigationBar|Card UI:


Video:


Code:

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

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

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHome(),
    );
  }
}

class MyHome extends StatefulWidget {
  @override  _MyHomeState createState() => _MyHomeState();
}

class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Image.asset("images/yuo.jpg", height: 120, width: 120,),
        backgroundColor: Colors.white,
        actions: <Widget>[

          IconButton(
              icon: Icon(Icons.videocam, color: Colors.black),
              onPressed: () {}),
          IconButton(
              icon: Icon(Icons.search, color: Colors.black),
              onPressed: () {}),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: CircleAvatar(
              backgroundImage: AssetImage("images/logo.jpg"),
            ),
          ),
        ],
      ),
      body: ListView(
        children: <Widget>[
          _buildcard("set", "Setting UI(Flutter 1)"),
          _buildcard("2a", "Profile UI(Flutter 2)"),
          _buildcard("3a", "Music UI(Flutter 3)"),
          _buildcard("4a", "WhatsApp UI(Flutter 4)Part-1"),
          _buildcard("5a", "WhatsApp UI(Flutter 5)Part-2"),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("Home"),),
            BottomNavigationBarItem(icon: Icon(Icons.explore), title: Text("Explore"),),
            BottomNavigationBarItem(icon: Icon(Icons.subscriptions), title: Text("Subscriptions"),),
            BottomNavigationBarItem(icon: Icon(Icons.email), title: Text("Inbox"),),
            BottomNavigationBarItem(icon: Icon(Icons.video_library), title: Text("Library"),),
          ],
        selectedItemColor: Colors.red,
        unselectedItemColor: Colors.grey,
        type: BottomNavigationBarType.fixed,
      ),
    );
  }

  Card _buildcard(cover, name) {
    return Card(
    child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
    Container(
    height: 200.0,
    decoration: BoxDecoration(image: DecorationImage(
    image: AssetImage("images/$cover.jpg"),
    fit: BoxFit.cover,
    )),
    ),
    SizedBox(height: 8,),
    Row(
    children: <Widget>[
    CircleAvatar(
    backgroundImage: AssetImage("images/logo.jpg"),
    ),
    SizedBox(width: 10.0,),
    Expanded(
    child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
    Text("$name",
    style: TextStyle(
    fontSize: 17,
    fontWeight: FontWeight.bold,
    ),
    ),
    Text("maherban husen tech 500 views"),
    Text("1d ago"),
      SizedBox(height: 10,),
    ],
    ),
    ),
    Icon(Icons.more_vert),
    ],
    )
    ],
    ),
    );
    }
}