Coding Flutter
Flutter: Youtube like App Bar
November 19, 2019
0
,

pubspec.yaml

flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  assets:
    
    - assets/images/youtube_icon.png
    - assets/images/youtube_action1.png
    - assets/images/youtube_action2.png
    - assets/images/youtube_action3.png
    - assets/images/profile_pic.png
     

lib/main.dart

import 'package:flutter/material.dart';



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

class YoutubeAppbar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
                backgroundColor: Colors.white,
              title: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  Image.asset(
                    'assets/images/youtube_icon.png',
                    fit: BoxFit.cover,
                    height: 45.0,
                  ),
                ],
              ),
              actions: [
                IconButton(
                  padding: EdgeInsets.all(10.0),
                  icon: Image.asset('assets/images/youtube_action1.png'),
                  onPressed: () {
                    // Implement navigation to shopping cart page here...
                    print('Click Action2');
                  },
                ),
                IconButton(
                  padding: EdgeInsets.all(10.0),
                  icon: Image.asset('assets/images/youtube_action2.png'),
                  onPressed: () {
                    // Implement navigation to shopping cart page here...
                    print('Click Action2');
                  },
                ),
                IconButton(
                  padding: EdgeInsets.all(10.0),
                  icon: Image.asset('assets/images/youtube_action3.png'),
                  onPressed: () {
                    // Implement navigation to shopping cart page here...
                    print('Click Action3');
                  },
                ),
                InkWell(
                  onTap: () {
                    print ('Click Profile Pic');
                  },
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(30),
                    child: Image.asset(
                      'assets/images/profile_pic.png',),
                  )

                )
              ],
            ),
            body: Container(
              decoration: BoxDecoration(color: Colors.grey),
            )));
  }
}

About author

ZERIN

CEO & Founder (BdBooking.com - Online Hotel Booking System), CEO & Founder (TaskGum.com - Task Managment Software), CEO & Founder (InnKeyPro.com - Hotel ERP), Software Engineer & Solution Architect

How do i install older version of CI4 using composer

Sometimes when you run git update & composer u...

Read more

hitpath API: Read Affiliates Record

<?php $offset = 0; $limit = 10; $url = "http://...

Read more

hitpath API: Read Campaigns Record

<?php $offset = 0; $limit = 10; $url = "http://...

Read more

There are 0 comments

Leave a Reply

Your email address will not be published. Required fields are marked *