Flutter AppBar, how to customize

Question

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

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: .

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.

Answer 1

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,
        //   ),
        // ));
    );
  }
}