how to place logo before the text flutter app bar

user_18589961 0
Viewed 241

I'm new to flutter creating a video screen flutter. this is the app bar and tab bar I have created for my app. I want to place my logo (middle image) before the "lalalive" word. how can I do that. appreciate your help on this..... ............................. ....................... .................................................

enter image description here

import 'package:flutter/material.dart';
import 'package:lala_live/screens/post_template.dart';

class VideoScreen extends StatefulWidget {
  const VideoScreen({Key? key}) : super(key: key);

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

class _VideoScreenState extends State<VideoScreen> {
  final _controller = PageController(initialPage: 0);

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length :5,
      child: Scaffold(
        appBar: AppBar(
          title: Padding(
            padding: const EdgeInsets.only(left: 30),
            child: Text("LalaLive",
                style:
                    TextStyle(fontWeight: FontWeight.bold, color: Colors.black)),
          ),
          backgroundColor: Colors.white,

          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.menu_rounded, color: Colors.black,size: 30,),
                text: 'Add',
              ),
              Tab(
                icon: Icon(Icons.tv, color: Colors.black,size: 30,),
                text: 'Add',
              ),
              Tab(
                icon: Icon(Icons.movie, color: Colors.black,size: 30,),
                text: 'Add',
              ),
              Tab(
                icon: Icon(Icons.video_call, color: Colors.black,size: 30,),
                text: 'Add',
              ),
              Tab(
                icon: Icon(Icons.search, color: Colors.black,size: 30,),
                text: 'Add',
              ),
            ],
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 100),
              child: Container(
                //  alignment: Alignment.topRight,
                width: 40,
                child: Image.asset(
                  'asset/images/LALA LIVE ICON 4.png',
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Icon(
                Icons.notifications_active,
                color: Colors.pinkAccent,
                size: 25,
              ),
            ),
          ],
        ),
flutter
2 Answers

Try below code and add your image in leading property.just chnage my icon with your image.

return DefaultTabController(
      length: 5,
      child: Scaffold(
        appBar: AppBar(
          leading: Container(
            padding: EdgeInsets.all(5),
            width: 40,
            child: Icon(
              Icons.add,
              color: Colors.black,
            ),
//                 child: Image.asset(
//                   'asset/images/LALA LIVE ICON 4.png',
//                 ),
          ),
          title: Padding(
            padding: const EdgeInsets.only(left: 30),
            child: Text("LalaLive",
                style: TextStyle(
                    fontWeight: FontWeight.bold, color: Colors.black)),
          ),
          backgroundColor: Colors.white,
          bottom: TabBar(
            tabs: [
              Tab(
                icon: Icon(
                  Icons.menu_rounded,
                  color: Colors.black,
                  size: 30,
                ),
                text: 'Add',
              ),
              Tab(
                icon: Icon(
                  Icons.tv,
                  color: Colors.black,
                  size: 30,
                ),
                text: 'Add',
              ),
              Tab(
                icon: Icon(
                  Icons.movie,
                  color: Colors.black,
                  size: 30,
                ),
                text: 'Add',
              ),
              Tab(
                icon: Icon(
                  Icons.video_call,
                  color: Colors.black,
                  size: 30,
                ),
                text: 'Add',
              ),
              Tab(
                icon: Icon(
                  Icons.search,
                  color: Colors.black,
                  size: 30,
                ),
                text: 'Add',
              ),
            ],
          ),
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 20),
              child: Icon(
                Icons.notifications_active,
                color: Colors.pinkAccent,
                size: 25,
              ),
            ),
          ],
        ),
      ),
    );

Result Screen-> image

user_139972100

Try this,

appBar: AppBar(
          title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                  Image.asset(
                 'assets/logo.png',
                  fit: BoxFit.contain,
                  height: 32,
              ),
              Text("Your Title"),
            ],
          ),
        )
       );
user_175537810
Related