name27 / flutter

0 stars 0 forks source link

자주 사용하는 위젯 #81

Open name27 opened 1 year ago

name27 commented 1 year ago

image

Stack

Stack(
      children: [
        Container(
          color: Colors.red,
          width: 250,
          height: 250,
        ),
        Positioned(
          right: 0,
          bottom: 0,
          child: Container(
            color: Colors.blue.withOpacity(0.4),
            width: 250,
            height: 250,
          ),
        )
      ],
    );

image

Divider

ListTile(
          title: Text('1번 타일'),
        ),
        Divider(
          height: 48,
          thickness: 4,
          indent: 24, //왼쪽 들여쓰기
          endIndent: 24, //오른쪽 패딩
          color: Colors.red,
        ),
        ListTile(
          title: Text('2번타일'),
        )

image

ListView.separated

ListView.separated(
          itemCount: 10,
          itemBuilder: ((context, index) {
            return Text(index.toString());
          }),
          separatorBuilder: ((context, index) {
            if(index % 3 == 0) return Divider();
            return SizedBox();
          }),
        )

AnimatedOpacity

투명도애니메이션

AnimatedOpacity(
          opacity: currentOpacity,  //double currentOpacity = 1;
          duration: Duration(milliseconds: 300),
          child: GestureDetector(
              onTap: () {
                currentOpacity = currentOpacity == 0 ? 1 : 0;
                setState(() {});
              },
              child: Text('안녕하세요')),
        )

AnimatedContainer

컨테이너애니메이션

AnimatedContainer(
          duration: Duration(milliseconds: 300),
          width: 100,
          height: 300,
          color: Colors.blue,
        ),

AspectRatio

AspectRatio(
          aspectRatio: 4/3, //비율
          child: AnimatedContainer(
            duration: Duration(milliseconds: 300),
            width: 100,
            height: 300,
            color: Colors.blue,
          ),
        ),

image

Wrap

Wrap(
      spacing: 8,
      runSpacing: 8,
          children: [
            Container(
              width: 90,
              height: 40,
              color: Colors.red,
            ),
            Container(
              width: 90,
              height: 40,
              color: Colors.orange,
            ),
            Container(
              width: 90,
              height: 40,
              color: Colors.yellow,
            ),
          ],
        )

패키지

1. url_launcher

2. cached_network_image

3. intl