[월:] 2022년 11월

Flutter – SizedBox

RUDY Leave a comment

https://api.flutter.dev/flutter/widgets/SizedBox-class.html

사이즈를 강제하는 Widget으로 부모 Widget이 허용하지 않을경우 무시된다고 한다. 사용 용도를 확인하기위해 많이 검색해보았지만 실제 개발할때 사용되는 방법은 widget간 간격을 조정할때 많이 사용된다고 하고 그 이외에는 다른 Widget을 사용하는것 같아.

투명한 박스 생성

아무런 속성을 추가하지 않고 높이:50, 너비:50인 투명한 박스를 생성한다.

return SizedBox(
  width: 100,
  height: 100,
);

색상이 들어간 박스 생성

SizedBox에 색상을 바로 설정할수없고, 다른 widget의 속성으로 설정할수 있다.

return SizedBox(
  width: 50,
  height: 50,
  child: Container(
    color: Colors.red,
  ),
);

SizedBox는 사이즈 설정에 최적화되어 있고 다른 속성을 추가하기위해서는 다른 widget을 사용해야한다.

만약 빨간색 박스가 필요하다면 아래와 같이 Container widget을 사용하는것이 효율적으로 보인다.

return Container(
  width: 50,
  height: 50,
  color: Colors.red,
);

SizedBox widget은 Container widget에 비해 적은 리소스를 사용하므로 widget끼리의 간격조정에 많이 사용되는것으로 보인다. 

body: Column(
  children: [
    BoxWidget(),
    SizedBox(height: 50,),
    BoxWidget(),
  ],
)

Flutter – SnackBar

RUDY Leave a comment 
import 'package:flutter/material.dart';

void main() => runApp(const SnackBarDemo());

class SnackBarDemo extends StatelessWidget {
  const SnackBarDemo({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'SnackBar Demo',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('SnackBar Demo'),
        ),
        body: const SnackBarPage(),
      ),
    );
  }
}

class SnackBarPage extends StatelessWidget {
  const SnackBarPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: () {
          final snackBar = SnackBar(
            content: Text('Yay! A Snack Bar!'),
          );
          ScaffoldMessenger.of(context).showSnackBar(snackBar);
        },
        child: const Text('Show SnackBar'),
      ),
    );
  }
}

SnackBarAction 추가하기

onPressed: () {
  final snackBar = SnackBar(
    content: Text('Yay! A Snack Bar!'),
    action: SnackBarAction(
      label: 'Close',
      onPressed: () {
        ScaffoldMessenger.of(context).hideCurrentSnackBar();
      },
    ),
  );
  ScaffoldMessenger.of(context).showSnackBar(snackBar);
},