Flutter_W3

오늘의 목표

📍 어떤 Layout Widget들이 있고, 어떤 역할인지 빠르게 익힌다.

📍 code lab을 공부하며 직접 배운 내용을 적용해본다.

🔸 * Multi-child layout widgets은 하위 widget 항목들을 배치하는 widget입니다. * Sigle-child layout은 하나의 child 라면, 위 Mulit는 children 의 개념으로 여러개의 크기를 조정합니다.

• Column class
  • 다수의 자식 위젯들을 세로로 표시하는 위젯
  • Column 위젯은 스크롤 되지 않으며(사용 가능한 room보다 열에 더 많은 자식 위젯을 갖는 것을 오류로 간주) -> 스크롤 할 수 있게 하려면 ListView사용
  • 가로로 표시하는 위젯에 경우 Row 위젯 사용
  • 자식 위젯이 하나일 경우, 정렬 또는 중심을 사용하여 배치하는 것이 좋음

child: Column(
    children: const <Widget>[
      Text('Deliver features faster'),
      Text('Craft beautiful UIs'),
      Expanded(
        child: FittedBox(
          child: FlutterLogo(),
        ),
      ),
    ],
  )),

• Column 위젯에 ListVIew()를 넣고 싶다면 Expanded() or Flexible()로 묶는다.

  • 만약에 size를 주고 싶으면
    SizedBox()로 묶는다.

• CustomMultiChildLayout class

  • 대리자를 사용하여 여러 자식의 크기를 조정하고 배치하는 위젯이다
  • 대리인은 각 자식에 대한 레이아웃 제약 조건을 결정할 수 있으며, 각 자식을 배치할 위치를 결정할 수 있다.
  • 대리자는 부모의 크기를 결정할 수도 있지만, 부모의 크기는 자식의 크기에 따라 달라 질 수 없다.

• CustomMultiChildLayout은 여러 위젯의 크기와 위치 사이에 복잡한 관계가 있을때 적합하다.

  CustomMultiChildLayout Constructors

  CustomMultiChildLayout({Key? key, required MultiChildLayoutDelegate delegate, List children = const []})
  Creates a custom multi-child layout.

• CustomSingleChildLayout은 단일 자식의 레이아웃을 제어하려 할때 적합하다.
  Stack 위젯은 위젯을 하나 또는 다른 에지에 정렬 할때 적합하다.

• Flow 위젯은 which provides paint-time control of its children using transform matrices.(변환행렬)

• 각 자식은 대리자에 대한 위젯을 식별하기 위해 LayoutId 위젯에 래핑되어야 한다.

• Flow class

  • FlowDelegate의 논리에 따라 자식의 크기를 효율적으로 조정하고 배치하는 위젯이다.
  • Flow 레이아웃은 변환행렬을 사용하여 자식의 위치를 변경하는데 최적화되어 있다.
  • Flow 컨테이너는 대리자의 FlowDelegate.getSize 함수에 의해 자식과 독립적으로 크기가 조정된다.

Single-child layout 위젯

• LimitedBox
  • A box that limits its size only when it's unconstrained.
• Offstage
  • A widget that lays the child out as if it was in the tree, but without painting anything, without making the child available for hit…
• OverflowBox
  • A widget that imposes different constraints on its child than it gets from its parent, possibly allowing the child to overflow the parent.
• Padding
  • A widget that insets its child by the given padding.
• SizedBox
  • A box with a specified size. If given a child, this widget forces its child to have a specific width and/or height (assuming values are…
• SizedOverflowBox
  • A widget that is a specific size but passes its original constraints through to its child, which will probably overflow.
• Transform
  • A widget that applies a transformation before painting its child.

Multi-child layout 위젯

• Column
• CustomMultiChildLayout
• Flow
• GridView
• IndexedStack
  • A Stack that shows a single child from a list of children.
• LayoutBuilder
  • Builds a widget tree that can depend on the parent widget's size.
• ListBody
  • A widget that arranges its children sequentially along a given axis, forcing them to the dimension of the parent in the other axis.
• ListView
• Row
• Stack
• Table
• Wrap
  • A widget that displays its children in multiple horizontal or vertical runs.

Sliver 위젯

• CupertinoSilverNavigationBar
• CustomScrollView
• SilverAppBar
• SilverChildBuilder Delegate
  • A delegate that supplies children for slivers using a builder callback.
• SliverChildLIst Delegate
  • A delegate that supplies children for slivers using an explicit list.
• SliverFixedExtent List
  • A sliver that places multiple box children with the same main axis extent in a linear array.
• SliverGrid
  • A sliver that places multiple box children in a two dimensional arrangement.
• SliverList
  • A sliver that places multiple box children in a linear array along the main axis.
• SLiverPadding
  • A sliver that applies padding on each side of another sliver.
• SliverPersistentHeader
  • A sliver whose size varies when the sliver is scrolled to the edge of the viewport opposite the sliver's GrowthDirection.
• SliverToBoxAdapter
  • A sliver that contains a single box widget.