refactor!: major refactor Flutter

- Use a single MaterialApp to keep the same state
- Use a named route for better cache
- Use Provider for dependency injection
- Fix widget & integration tests
- Enable linter
- Split the big files into *_screen.dart

Author: kkweon

.github/workflows/ci.yml

@@ -21,6 +21,8 @@ jobs:
         with:
           channel: "stable"
       - run: flutter pub get
+      - run: flutter pub run build_runner build
+      - run: flutter analyze
       - run: flutter test
       - run: flutter build apk
 
@@ -60,4 +62,4 @@ jobs:
         with:
           name: kkweon
 
-      - uses: okteto/pipeline@master
+      - uses: okteto/pipeline@master

.gitignore

@@ -1,3 +1,4 @@
 .idea
 .DS_Store
 .vscode
+/client/test/**/*_test.mocks.dart

Makefile

@@ -16,7 +16,7 @@ ifeq ($(UNAME),Darwin)
 else ifeq ($(UNAME), Linux)
 	PROTOC_FULL_URL := $(PROTOC_URL)/$(PROTOC_ZIP_LINUX)
 	PROTOC_FILE := $(PROTOC_ZIP_LINUX)
-else ifeq($(UNAME), Windows)
+else ifeq ($(UNAME), Windows)
 	PROTOC_FULL_URL := $(PROTOC_URL)/$(PROTOC_ZIP_WINDOWS)
 	PROTOC_FILE := $(PROTOC_ZIP_WINDOWS)
 endif
@@ -57,7 +57,16 @@ test: test.go test.dart
 
 .PHONY: test.dart
 test.dart:
-	cd client && flutter test
+	cd client && flutter pub run build_runner build && flutter analyze && flutter test
+
+.PHONY: test.dart-e2e
+test.dart-e2e:
+	cd client && flutter drive --target=test_driver/app.dart
+
+.PHONY: format.dart
+format.dart:
+	cd client && flutter format .
+	make gen.dart
 
 .PHONY: test.go
 test.go: lint.go
@@ -76,4 +85,4 @@ lint.go:
 .PHONY: clean
 clean:
 	rm -rf ./client/lib/protos
-	rm -rf ./server/pkg/pr12er/*.pb.go
+	rm -rf ./server/pkg/pr12er/*.pb.go

client/analysis_options.yaml

@@ -0,0 +1,4 @@
+include: package:lint/analysis_options.yaml
+analyzer:
+  exclude:
+    - lib/**/*.pb*.dart

client/lib/detail.dart

@@ -1,116 +1,32 @@
 import 'package:flutter/material.dart';
-import 'detail.dart';
-import 'service.dart';
-import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
+import 'package:pr12er/service.dart';
+import 'package:provider/provider.dart';
 
-void main() => runApp(MyApp());
+import 'screens/detail_screen.dart';
+import 'screens/main_screen.dart';
 
-class MyApp extends StatelessWidget {
-  @override
-  Widget build(BuildContext context) {
-    return MaterialApp(
-      title: 'Welcome to Flutter',
-      home: Scaffold(
-          appBar: AppBar(
-            leading: Icon(Icons.search),
-            title: Text('pr12errrrrrrrrrrrrrrrrrrr'),
-          ),
-          body: Client()),
-    );
-  }
-}
+const appName = 'PR12er';
 
-class Client extends StatefulWidget {
-  @override
-  _ClientState createState() => _ClientState();
-}
+void main() => runApp(MultiProvider(providers: [
+      Provider(
+        create: (context) => GrpcClient(),
+      )
+    ], child: const MainApp()));
 
-class _ClientState extends State<Client> {
-  List<Video> videos = [];
-  final myController = TextEditingController();
-
-  Future<List<Video>> _fetchListItems() async {
-    List<Video> videos = await GrpcMsgSender().getVideos();
-    return videos;
-  }
-
-  List<Widget> getCategoryWidgets(Category category) {
-    switch (category) {
-      case Category.CATEGORY_VISION:
-        return [Icon(Icons.remove_red_eye), Text('CV')];
-      case Category.CATEGORY_NLP:
-        return [Icon(Icons.translate), Text('NLP')];
-      case Category.CATEGORY_AUDIO:
-        return [Icon(Icons.graphic_eq), Text('AUDIO')];
-      case Category.CATEGORY_RS:
-        return [Icon(Icons.assistant), Text('RS')];
-      case Category.CATEGORY_OCR:
-        return [Icon(Icons.text_fields), Text('OCR')];
-      case Category.CATEGORY_UNSPECIFIED:
-      default:
-        return [Icon(Icons.grid_view), Text('ETC')];
-    }
-  }
+class MainApp extends StatelessWidget {
+  const MainApp({
+    Key? key,
+  }) : super(key: key);
 
   @override
   Widget build(BuildContext context) {
-    return FutureBuilder(
-        future: _fetchListItems(),
-        builder: (context, AsyncSnapshot snapshot) {
-          if (!snapshot.hasData) {
-            return Center(child: CircularProgressIndicator());
-          }
-          return ListView.builder(
-              padding: const EdgeInsets.all(8),
-              itemCount: snapshot.data.length,
-              itemBuilder: (BuildContext context, int index) {
-                return getTile(index,
-                    title: snapshot.data[index].title,
-                    presenter: snapshot.data[index].presenter,
-                    keyword: "현재 키워드 지원(X)",
-                    category: snapshot.data[index].category,
-                    url: snapshot.data[index].link);
-              });
-        });
-  }
-
-  Widget getTile(int index,
-      {String title = "",
-      String presenter = "",
-      String keyword = "",
-      Category category = Category.CATEGORY_UNSPECIFIED,
-      String url = ""}) {
-    return Card(
-      child: ListTile(
-        leading: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: getCategoryWidgets(category)),
-        title: Text('${title}'),
-        subtitle: Padding(
-            padding: EdgeInsets.only(top: 10),
-            child: Row(children: [
-              Column(children: [Text(presenter)]),
-              Padding(
-                  padding: EdgeInsets.only(left: 30),
-                  child: Column(children: [
-                    Text(
-                      keyword,
-                      style: TextStyle(fontStyle: FontStyle.italic),
-                    )
-                  ]))
-            ])),
-        trailing: Column(
-            mainAxisAlignment: MainAxisAlignment.center,
-            children: [Icon(Icons.favorite_border_outlined)]),
-        onTap: () {
-          Navigator.push(
-            context,
-            MaterialPageRoute(
-              builder: (context) => DetailApp(url),
-            ),
-          );
-        },
-      ),
+    return MaterialApp(
+      title: appName,
+      initialRoute: MainScreen.routeName,
+      routes: {
+        MainScreen.routeName: (context) => MainScreen(),
+        DetailScreen.routeName: (context) => DetailScreen(),
+      },
     );
   }
 }

client/lib/main.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+import 'package:pr12er/protos/pkg/pr12er/messages.pb.dart';
+import 'package:youtube_player_flutter/youtube_player_flutter.dart';
+import 'package:pr12er/utils/extractor.dart';
+
+class DetailScreenArguments {
+  final Video video;
+
+  DetailScreenArguments(this.video);
+}
+
+class DetailScreen extends StatelessWidget {
+  static const String routeName = "detail_app";
+
+  @override
+  Widget build(BuildContext context) {
+    final args =
+        // ignore: cast_nullable_to_non_nullable
+        ModalRoute.of(context)!.settings.arguments as DetailScreenArguments;
+
+    return Scaffold(
+        appBar: AppBar(
+          leading: IconButton(
+            icon: const Icon(Icons.arrow_back),
+            onPressed: () {
+              Navigator.pop(context);
+            },
+          ),
+          title: Text(args.video.title,
+              key: const ValueKey("$routeName/appBar/title")),
+        ),
+        body: Detail(youtubeId: extractYoutubeId(args.video.link)));
+  }
+}
+
+class Detail extends StatefulWidget {
+  final String youtubeId;
+
+  const Detail({required this.youtubeId});
+
+  @override
+  _DetailState createState() => _DetailState();
+}
+
+class _DetailState extends State<Detail> {
+  late final YoutubePlayerController _controller;
+
+  @override
+  void initState() {
+    super.initState();
+
+    _controller = YoutubePlayerController(
+      initialVideoId: widget.youtubeId,
+    );
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return YoutubePlayerBuilder(
+      player: YoutubePlayer(
+        controller: _controller,
+      ),
+      builder: (context, player) {
+        return Column(
+          children: [player],
+        );
+      },
+    );
+  }
+}