Question 76078 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter AppBar, how to customize

I’m new using Flutter and and I’m having trouble understanding how the AppBar works.

I would like to get a result similar to this
1

my main problem is how to add a box, similar to the orange one in the picture, inside the leading, that’s what i want to add exactly: 2.

the problem I have with the leading is that, having a fixed size, if what’s inside increases in size it overflows, so I thought of creating a custom app bar using rows and columns, any suggestions on how to proceed ?

Thanks in advance.

Tags:

2

Answers


  1. 0

    Here is just a small piece of code. Look into it

    Add widget or icon in leading props to show in the very beginning.

    note: I had added the icon, you can add any widget instead of that.

    AppBar(
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
title: Text("Customize App"),
),
actions: [
    IconButton(
      icon: Icon(Icons.settings),
      onPressed: () {},
    ),
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {},
    ),
  ],

    This how you can do. Cheers flutter!

    Login or Signup to reply.
  2. 0

    I’m try To Solve Your Problem

    Here is Code:

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

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        title: TextButton(
            style: TextButton.styleFrom(
              backgroundColor: Colors.purple,
              shape: RoundedRectangleBorder(
                borderRadius:  BorderRadius.circular(999),
              ),
            ),
            onPressed: () {  },
            child: Text('1644  $', style: TextStyle(color: Colors.white))
        ),
        elevation: 0,
        actions: [
          Row(
            children: [

              Text("Aujourd'Hui", style: TextStyle(color: Colors.black,fontSize: 19,fontWeight: FontWeight.bold),),
              SizedBox(
                width: 60,
              ),
              const SizedBox(width: 10),
              Icon(Icons.contact_mail, color: Colors.black),
              const SizedBox(width: 10),
              Icon(Icons.settings, color: Colors.black),
              SizedBox(
                width: 23,
              ),
            ],
          ),
        ],
      ),
        // body: SafeArea(
        //   child: Container(
        //     padding: const EdgeInsets.symmetric(horizontal: 10),
        //     child: Row(
        //       children: [
        //         Expanded(child: Text("Username", style: TextStyle(color: Colors.black),)),
        //         const SizedBox(width: 10),
        //         Icon(Icons.message, color: Colors.black),
        //         const SizedBox(width: 10),
        //         TextButton(
        //             style: TextButton.styleFrom(
        //               backgroundColor: Colors.purple,
        //               shape: RoundedRectangleBorder(
        //                 borderRadius:  BorderRadius.circular(999),
        //               ),
        //             ),
        //             onPressed: () {  },
        //             child: Text('Edit', style: TextStyle(color: Colors.white))
        //         ),
        //       ],
        //     ),
        //     height: kToolbarHeight,
        //   ),
        // ));
    );
  }
}

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search