HIDI Flutter Challenge (7) AppBar Widget

hello_hidiยท2021๋…„ 8์›” 31์ผ
0

HIDI's Flutter Challenge

๋ชฉ๋ก ๋ณด๊ธฐ
7/12
post-thumbnail

AppBar Widget

> AppBar Widget

  • ์•ฑ ๋ฐ”๋ฅผ ๋””์ž์ธํ•˜๋Š” ์œ„์ ฏ
  • SliverAppBar: ์•ฑ๋ฐ”๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์‚ฌ์šฉ์ž ์ง€์ • ์Šคํฌ๋กค ๋ณด๊ธฐ์—์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ์œ ์—ฐํ•œ ์•ฑ๋ฐ”๋ฅผ ์ œ๊ณต
  • ์‹œ์Šคํ…œ UI ์นจ์ž…์„ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด ์ฃผ๋ณ€ MediaQuery์˜ ํŒจ๋”ฉ์— ๋”ฐ๋ผ ์ฝ˜ํ…์ธ ๋ฅผ ์‚ฝ์ž…ํ•ฉ๋‹ˆ๋‹ค.

image

>> Implementation

  
   AppBar({
    Key? key,
    this.leading,
    this.automaticallyImplyLeading = true,
    this.title,
    this.actions,
    this.flexibleSpace,
    this.bottom,
    this.elevation,
    this.shadowColor,
    this.shape,
    this.backgroundColor,
    this.foregroundColor,
    this.brightness,
    this.iconTheme,
    this.actionsIconTheme,
    this.textTheme,
    this.primary = true,
    this.centerTitle,
    this.excludeHeaderSemantics = false,
    this.titleSpacing,
    this.toolbarOpacity = 1.0,
    this.bottomOpacity = 1.0,
    this.toolbarHeight,
    this.leadingWidth,
    this.backwardsCompatibility,
    this.toolbarTextStyle,
    this.titleTextStyle,
    this.systemOverlayStyle,
}) : assert(automaticallyImplyLeading != null),
     assert(elevation == null || elevation >= 0.0),
     assert(primary != null),
     assert(toolbarOpacity != null),
     assert(bottomOpacity != null),
     preferredSize = Size.fromHeight(toolbarHeight ?? kToolbarHeight + (bottom?.preferredSize.height ?? 0.0)),
     super(key: key);
     
     

>> AppBar ์ฃผ์š” ์†์„ฑ

  • actions : ์ œ๋ชฉ ์œ„์ ฏ ๋‹ค์Œ์— ํ–‰์— ํ‘œ์‹œํ•  ์œ„์ ฏ ๋ชฉ๋ก์ž…๋‹ˆ๋‹ค. => final List? actions;
    1. ์ผ๋ฐ˜์ ์œผ๋กœ iconButton์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค
  • leading : ํˆด๋ฐ” ์ œ๋ชฉ ์•ž์— ํ‘œ์‹œํ•  ์œ„์ ฏ
    => final Widget? leading;

    1. ์ผ๋ฐ˜์ ์œผ๋กœ icon ๋˜๋Š” iconButton์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค.
    2. ๋„ค๋น„๊ฒŒ์ด์…˜์˜ ์ฃผ์š” ๊ตฌ์„ฑ ์š”์†Œ๊ฐ€ ๋จ.
  • title : ์•ฑ ๋ชจ์Œ์— ํ‘œ์‹œ๋˜๋Š” ๊ธฐ๋ณธ ์œ„์ ฏ
    => final Widget? title;
  • bottom : ์•ฑ ๋ฐ”์˜ ๋งจ ์•„๋ž˜๋ฅผ ๋‚˜ํƒ€๋ƒ„
    => final PreferredSizeWidget? bottom;
    1. ์ผ๋ฐ˜์ ์œผ๋กœ ํƒญ ํ‘œ์‹œ์ค„๋กœ ์‚ฌ์šฉ
    2. PreferredSizeWidget์„ ๊ตฌํ˜„ํ•˜๋Š” ์œ„์ ฏ๋งŒ ์‚ฌ์šฉ ๊ฐ€๋Šฅ.
  • backgroundColor : ์•ฑ๋ฐ”์˜ ๋ฐฐ๊ฒฝ ์ƒ‰
    => final Color? backgroundColor;
  • elevation : ์•ฑ ๋ฐ” ์•„๋ž˜์˜ ๊ทธ๋ฆผ์ž ํฌ๊ธฐ๋ฅผ ์ œ์–ด
    => final double? elevation;
profile
์•ˆ๋‡ฝํฌ๋””

0๊ฐœ์˜ ๋Œ“๊ธ€