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

Custom Appbar on Flutter

UI Design from Figma

hi, I want to create this page using flutter. but how do I make an appbar like on that page and the searchbar. Is there a tutorial for creating a page like that or creating a custom appbar like that? I’ve searched everywhere to make an appbar but there are no results?

Tags:

3

Answers


  1. 0

    There is no predefined app bar like that you want, but you can easly achive that using a Stack widget.

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

class MyHomePage extends StatefulWidget {

  const MyHomePage({
    super.key,
  });

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Stack(children:[
          Align(
              alignment: Alignment.topCenter,
              child: SvgPicture.asset("assetName")),
          const Column(children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Column(
                  children: [
                    Text(""),
                    Text(""),
                  ],
                ),
                CircleAvatar(),
              ],
            )
          ],)
        ])
    );
  }
}

    For flutter_svg just run:

    flutter pub add flutter_svg
    Login or Signup to reply.
  2. 0

    The beauty of flutter is that you can create your own app bar.
    It’s a widget.

    Here is a basic bottom bar

    class SimpleBottomBar extends StatelessWidget {
  @override
  Widget build(
    BuildContext context,
  ) {
    return Container(
      height: 80,
      padding: EdgeInsets.symmetric(12),
      decoration: BoxDecoration(
        color: Theme.of(context).colorScheme.surface,
        border: Border(
          top: BorderSide(
            color: Theme.of(context).colorScheme.onBackground.withOpacity(0.15),
          ),
        ),
      ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: ...,
      ),
    );
  }
}

    of course you can do as you want

    Login or Signup to reply.
  3. 0

    try this:

    class _Constant {
  static const String navTitle = 'Calculator';
  static const String profilePath = 'assets/images/profile.png';
  static const String backPath = 'assets/images/back.png';
  static const double iconHeight = 20;
  static const double titleFontSize = 16;
}

class HomeScreen extends StatelessWidget {

  const HomeScreen({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: CustomAppNavigationBar(
        appBarChild: NavigationBarWithProfile(
          title: _Constant.navTitle,
          hideBackBarButton: true,
          onBackButtonPressed: () {},
          onProfileButtonPressed: () => _onProfileButtonPressed(context),
        ),
      ),
      body: const Container(),
    );
  }

  /// On click of profile button, navigate to profile screen
  void _onProfileButtonPressed(BuildContext context) {
  }
}

// Custom App Bar
class CustomAppNavigationBar extends StatelessWidget implements PreferredSize {
  const CustomAppNavigationBar(
      {Key? key,
      this.height = 40.0,
      required this.appBarChild})
      : super(key: key);
  final double height;
  final Widget appBarChild;

  @override
  Widget get child => appBarChild;

  @override
  Size get preferredSize => Size.fromHeight(height);

  @override
  Widget build(BuildContext context) {
    final double deviceWidth = MediaQuery.sizeOf(context).width;
    return SafeArea(
      child: Container(
        width: deviceWidth,
        height: height,
        color: Theme.of(context).colorScheme.surface,
        child: appBarChild,
      ),
    );
  }
}



// Navigation with Profile 

class NavigationBarWithProfile extends StatelessWidget {
  const NavigationBarWithProfile({
    Key? key,
    required this.title,
    this.hideBackBarButton = false,
    required this.onBackButtonPressed,
    required this.onProfileButtonPressed,
  }) : super(key: key);

  final String title;
  final bool hideBackBarButton;
  final VoidCallback onBackButtonPressed;
  final VoidCallback onProfileButtonPressed;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: AppSpacing.appSpacing10),
      color: Theme.of(context).colorScheme.onPrimary,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          NavigationBackButton(
            hideBackBarButton: hideBackBarButton,
            onBackButtonPressed: onBackButtonPressed,
          ),
          Text(
            title,
            style: TextStyle(
                fontSize: _Constant.titleFontSize,
                fontWeight: FontWeight.w500,
                color: Theme.of(context).colorScheme.onSecondary),
          ),
          NavigationProfileButton(
            onProfileButtonPressed: onProfileButtonPressed,
          ),
        ],
      ),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search