[Flutter_test] 테스트코드 예제1

✅ TestCode

우선 Provider 를 이용해서 Counter app 을 구현했다.

앱의 구조는 아래와 캡쳐 사진과 같이 구조를 짜봤다.

👨‍💻 lib/main.dart

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_code/screens/my_home_page.dart';

import 'model/counter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => Counter(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
          visualDensity: VisualDensity.adaptivePlatformDensity,
        ),
        home: MyHomePage(title: 'Flutter Counter App'),
      ),
    );
  }
}

✓ MaterialApp 을 ChangeNotifierProvider 로 감싼 이유는, Provider에 접근하기 위해서다.

👨‍💻 lib/model/counter.dart : Provider 로 클래스를 구현.

import 'package:flutter/cupertino.dart';

class Counter extends ChangeNotifier {
  int count = 0;

  void increment() {
    count++;
    notifyListeners();
  }
}

👨‍💻 lib/screens/my_home_page : 화면을 따로 빼서 구현.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:test_code/model/counter.dart';

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Consumer<Counter>(
              builder: (context, counter, child) {
                return Text(
                  counter.count.toString(),
                  style: Theme.of(context).textTheme.headline4,
                );
              },
            ),
            ///Text(Provider.of<Counter>(context).count.toString())
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () =>
            Provider.of<Counter>(context, listen: false).increment(),
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Counter 클래스에서 숫자값인 count를 가져오기 위해선 Consumer 위젯을 사용했는데, 이는 return 값이 Text 라는 위젯이기 때문이다. 위젯을 return 값으로 받을 때는 Consumer 를 사용하고, floatingActionButton 에서 쓴 것과 같이, 함수만 불러오거나, 값만을 불러올 때는, Provider.of<Counter>를 사용해도 된다.

Counter 클래스에서 숫자값만을 가져올때, Consumer 대신 Provider.of<Counter> 를 사용해도 무방하다.

❌결국 둘다 같은 역할이지만, 상황에 따라 다르게 쓰면 된다.

‼️Provider.of<Counter>(context,listen:false).increment() 에서 listen은 버튼에 적용시킬땐 무조건 false값을 줘야한다. 기본값은 true인데, true로 해놓으면 계속해서 바라보고 있기 때문에 과부화(?)같은게 걸릴 수 있다.