flutter에서 자주 사용되는 기술

flutter에서 자주 사용되는 기술

 

0. ctrl + click으로 해당 위젯이 요구하는 속성 찾아보기 (이게 제일 중요)

 

예를 들어보겠습니다.

아 CircleAvatar는 stless 위젯이고 모든 속성은 {} 에 들어있으므로 선택적으로 값을 줄 수 있겠군요.

따라서 CircleAvatar(child: ...., backgroundColor: .... ) 이렇게 값을 줄 수 있겠습니다.

 

 * 이는 Dart의 문법에서 클래스의 생성자를 정의할 때 {}를 씌웠느냐, 씌우지 않았느냐의 차이와 똑같습니다. 아시죠?

class CircleAvatar extends StatelessWidget {
  /// Creates a circle that represents a user.
  const CircleAvatar({
    Key key,
    this.child,
    this.backgroundColor,
    this.backgroundImage,
    this.onBackgroundImageError,
    this.foregroundColor,
    this.radius,
    this.minRadius,
    this.maxRadius,
  }) : assert(radius == null || (minRadius == null && maxRadius == null)),
       assert(backgroundImage != null || onBackgroundImageError == null),
       super(key: key);

 

반면에 Icon을 살펴보면 this.icon 이 {} 밖에 정의된 것을 확인할 수 있습니다. 따라서 해당 값을 줄 때는 속성을 명시하지 않고 바로 던져줘야 함을 알 수 있습니다.

이는 곧 Icon(....., size: ..., color: ...) 로 줘야 함을 의미합니다. 

class Icon extends StatelessWidget {
  /// Creates an icon.
  ///
  /// The [size] and [color] default to the value given by the current [IconTheme].
  const Icon(
    this.icon, {
    Key key,
    this.size,
    this.color,
    this.semanticLabel,
    this.textDirection,
  }) : super(key: key);

 

우리가 위젯을 만들 때도 마찬가지로 위와 같은 점을 고려해서 작성하고 활용하면 됩니다.

 

 

1. Widget을 별도의 클래스로 분리하기. 생성자 함수 주의! ({this.property})

2. 새로운 Widget으로 wrapping하기 (fixer를 사용합시다)

3. 반복되고 두꺼운 속성을 관리할 상수 전용 관리 파일(k_) 만들고 세부 속성을 .copyWith로 덮어 씌우기

4. , 과 ;를 통해 formatting 하기

5. stful 위젯의 lifecycle을 이용하기 (initState, build, dispose)

 

• initState는 async 가 안됩니다.
• 페이지 이동시 TextConroller 등 dispose를 통해 닫하줘야 할 내용들을 닫아줘야 메모리 최적화에 좋습니다.

 

6. 재선언을 주의하며 변수를 선언하고, 내부 메서드를 통해 변수를 조작하기

// 클래스 외부. 어디에서든 사용 가능한 변수.
final outside;

class _ChatScreenState extends State<ChatScreen> {
  // 클래스 내부 변수. 클래스 내부 어디서든 사용 가능
  final _auth = FirebaseAuth.instance;

  void test() {
    // 함수 내부 변수. 함수를 벗어나는 스코프에서는 사용 불가.
    // 같은 이름을 선언하면 또 다른 변수가 생성되는 것이므로 지양할 것
    String messageText
  }

 

7. _를 이용하여 클래스 private 변수 선언하기

 

8. getter를 사용하여 (flutter에서는 get 이군요) 위젯을 return하는 함수 만들기

 

그러니까 해당 위젯 내에서만 사용할 private한 함수를 get으로 처리해서 가져다 붙여 쓰면 됩니다.

  get _getTabIconButtons => Row(
        children: <Widget>[
          Expanded(
              child: IconButton(
            icon: ImageIcon(
              AssetImage("assets/grid.png"),
            ),
            onPressed: () {},
          )),
          Expanded(
              child: IconButton(
            icon: ImageIcon(
              AssetImage("assets/saved.png"),
            ),
            onPressed: () {},
          )),
        ],
      );

 

9. 클래스 생성자를 통해 위젯에서 위젯으로 값 전달하기

 

• MyHomePage의 생성자에서 {Key key, this.title} 을 통해 MyHomePage를 생성하는데 title 속성을 줘야 함을 명시
• 상태 클래스(_MyHomePageState)와 연결된 클래스 MyHomePage에 정의된 title을 가져오기 위해 widget.title 이용(앞에 Widget을 붙이면 연결된 클래스의 변수를 가져올 수 있음)

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '플러터 데모',
      home: MyHomePage(title: '플러터 데모'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(

        title: Text(widget.title),
      ),
      body: Center(... 이하 생략)

 

 

stless 위젯 또한 생성자를 통해 다른 위젯에서 변수를 받아오는 방식으로 생성할 수 있다.

다음은 stless 위젯의 생성자를 생성해서 (본래 stless 숏컷으로 생성하면 생성자를 안주므로 수동으로 생성해야 한다) 이용하도록 하자.

class BmiResult extends StatelessWidget {
  final double height;
  final double weight;

  BmiResult(this.height, this.weight);

  @override
  Widget build(BuildContext context) {
    return ... 생략   
  }
}

생서자 함수를 지정했으니 해당 위젯을 이용할 때 인자를 넘겨주면 됩니다.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => BmiResult(
      double.parse(_heightController.text.trim()),
      double.parse(_weightController.text.trim()),
    ),
  ),
);