custom appbar component

✅ appbar를 component로 따로 빼서 쓸 때, leading을 custom하면 클릭 이벤트를 넣어주어야 하는데, context를 불러오지 못할 때 해결방법!

 

① final BuildContext context;  = context를 넣고, required로 필수값으로 받아주게 하고,

import 'package:flutter/material.dart';
import 'package:riverpod_firestore_steam1/core/theme.dart';

class BoardAppBarV2 extends AppBar implements PreferredSizeWidget {
  BoardAppBarV2({required this.context, super.key, required this.titlename});
  final String? titlename;
  final BuildContext context;

  // @override
  // bool get automaticallyImplyLeading => false;
  @override
  // TODO: implement foregroundColor
  Color? get foregroundColor => Colors.black;

  @override
  double? get titleSpacing => -10;

  @override
  Color? get backgroundColor => Colors.white;

  @override
  Widget? get leading => InkWell(
        onTap: () {
          Navigator.pop(context);
        },
        child: Padding(
          padding: const EdgeInsets.only(left: 8),
          child: Row(
            children: [
              Icon(Icons.arrow_back_ios_new, color: kPrimaryColor()),
            ],
          ),
        ),
      );

  @override
  Widget? get title => Text(
        "${titlename}",
        style: textTheme(color: kPrimaryColor(), weight: FontWeight.bold).headline2,
      );

  @override
  List<Widget>? get actions => [
        IconButton(
          onPressed: () {},
          icon: Image.asset("assets/notice_black.png", width: 20, height: 20),
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(),
        ),
        const SizedBox(width: 14),
        IconButton(
          onPressed: () {},
          icon: Image.asset("assets/setting_black.png", width: 20, height: 20),
          padding: EdgeInsets.zero,
          constraints: const BoxConstraints(),
        ),
        const SizedBox(width: 20),
      ];

  // @override
  // ShapeBorder? get shape => RoundedRectangleBorder(
  //       borderRadius: BorderRadius.only(bottomLeft: Radius.circular(10)),
  //     );

  @override
  ShapeBorder? get shape => Border(bottom: BorderSide(width: 1, color: klightGreyColor()));

  @override
  //final Size preferredSize; // This didnot work for me.
  Size get preferredSize => const Size.fromHeight(55);
}

 

 

② 사용할 페이지에서 context 받아주기

import 'package:flutter/material.dart';

import 'components/board_app_bar_v2.dart';

class BoardListPage extends StatelessWidget {
  const BoardListPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BoardAppBarV2(titlename: "TODOFRIENDS", context: context),
    );
  }
}

context: context

 

 

③ 실행화면