Merge pull request am15h#37 from am15h/text_example

update bert qa example

example/bert_question_answer/README.md

@@ -5,3 +5,7 @@ Sample app for Bert Question Answer in using the TFLite Flutter Task Library.
 ### Steps to run
 
 Download `lite-model_mobilebert_1_metadata_1.tflite` from [here](https://tfhub.dev/tensorflow/lite-model/mobilebert/1/metadata/1?lite-format=tflite) and place in `assets/`.
+
+### Demo
+
+![demo](demo.gif)

example/bert_question_answer/android/app/build.gradle

@@ -1,5 +1,3 @@
-package example.bert_question_answer.android.app
-
 def localProperties = new Properties()
 def localPropertiesFile = rootProject.file('local.properties')
 if (localPropertiesFile.exists()) {
@@ -37,7 +35,7 @@ android {
     defaultConfig {
         // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
         applicationId "com.example.bert_question_answer"
-        minSdkVersion 16
+        minSdkVersion 21
         targetSdkVersion 30
         versionCode flutterVersionCode.toInteger()
         versionName flutterVersionName

example/bert_question_answer/android/build.gradle

@@ -1,5 +1,3 @@
-package example.bert_question_answer.android
-
 buildscript {
     ext.kotlin_version = '1.3.50'
     repositories {

example/bert_question_answer/android/settings.gradle

@@ -1,5 +1,3 @@
-package example.bert_question_answer.android
-
 include ':app'
 
 def localPropertiesFile = new File(rootProject.projectDir, "local.properties")

example/bert_question_answer/lib/main.dart

@@ -1,5 +1,6 @@
 import 'package:bert_question_answer/ui/article_list_page.dart';
 import 'package:flutter/material.dart';
+import 'package:google_fonts/google_fonts.dart';
 
 void main() {
   runApp(MyApp());
@@ -12,6 +13,9 @@ class MyApp extends StatelessWidget {
     return MaterialApp(
       title: 'TFL Question and Answer',
       theme: ThemeData(
+        textTheme: GoogleFonts.robotoTextTheme(
+          Theme.of(context).textTheme,
+        ),
         primarySwatch: Colors.orange,
       ),
       home: MyHomePage(title: 'TFL Question and Answer'),

example/bert_question_answer/lib/ui/article_list_page.dart

@@ -3,9 +3,9 @@ import 'package:bert_question_answer/data/qa_data.dart';
 import 'package:bert_question_answer/ui/question_answerer_page.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:random_color/random_color.dart';
 
 class ArticleListPage extends StatelessWidget {
-
   @override
   Widget build(BuildContext context) {
     return FutureBuilder<List<QaData>>(
@@ -15,7 +15,7 @@ class ArticleListPage extends StatelessWidget {
           return Column(
             children: [
               Padding(
-                padding: const EdgeInsets.all(8.0),
+                padding: const EdgeInsets.all(16.0),
                 child: Text("Choose a topic from the list"),
               ),
               Expanded(
@@ -24,8 +24,10 @@ class ArticleListPage extends StatelessWidget {
                   itemBuilder: (context, i) {
                     return ListTile(
                       onTap: () {
-                        Navigator.push(context, MaterialPageRoute(builder: (context) {
-                          return QuestionAnswererPage(data: snapshot.data!.elementAt(i));
+                        Navigator.push(context,
+                            MaterialPageRoute(builder: (context) {
+                          return QuestionAnswererPage(
+                              data: snapshot.data!.elementAt(i));
                         }));
                       },
                       title: Text(snapshot.data!.elementAt(i).title),

example/bert_question_answer/lib/ui/question_answerer_page.dart

@@ -3,6 +3,7 @@ import 'package:bert_question_answer/data/qa_data.dart';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
+import 'package:random_color/random_color.dart';
 
 class QuestionAnswererPage extends StatefulWidget {
   final QaData data;
@@ -17,17 +18,38 @@ class _QuestionAnswererPageState extends State<QuestionAnswererPage> {
   final controller = TextEditingController();
   late final BertQA classifier;
 
+  late List<Widget> suggestedQuestions;
+
   String? answer;
 
   @override
   void initState() {
     super.initState();
     classifier = BertQA();
+    suggestedQuestions = List.generate(
+      widget.data.questions.length,
+      (i) => GestureDetector(
+        onTap: () {
+          controller.text = widget.data.questions.elementAt(i);
+          getAnswer();
+        },
+        child: Padding(
+          padding: const EdgeInsets.all(8.0),
+          child: Chip(
+            backgroundColor: RandomColor()
+                .randomColor(colorBrightness: ColorBrightness.veryLight)
+                .withOpacity(0.5),
+            label: Text(widget.data.questions.elementAt(i)),
+          ),
+        ),
+      ),
+    );
   }
 
   @override
   Widget build(BuildContext context) {
     return Scaffold(
+      backgroundColor: Colors.white,
       appBar: AppBar(
         leading: BackButton(color: Colors.white),
         title: Text(
@@ -41,7 +63,13 @@ class _QuestionAnswererPageState extends State<QuestionAnswererPage> {
           children: [
             Expanded(
               child: SingleChildScrollView(
-                child: Text(widget.data.content),
+                child: Card(
+                    child: Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Text(
+                    widget.data.content,
+                  ),
+                )),
               ),
             ),
             Expanded(
@@ -50,37 +78,25 @@ class _QuestionAnswererPageState extends State<QuestionAnswererPage> {
                   mainAxisAlignment: MainAxisAlignment.end,
                   children: [
                     Container(
-                      padding: const EdgeInsets.all(8.0),
+                      padding: const EdgeInsets.all(12.0),
                       decoration: BoxDecoration(
-                          color: answer != null
-                              ? Colors.orange
-                              : Colors.transparent),
-                      child: Column(
-                        children: [
-                          Text(answer ?? 'Ask Question'),
-                        ],
+                        color: answer != null
+                            ? Colors.orangeAccent
+                            : Colors.transparent,
+                        borderRadius: BorderRadius.circular(4.0),
+                      ),
+                      child: Text(
+                        answer ?? 'Ask Question',
+                        style: TextStyle(
+                          color: Colors.black87,
+                        ),
                       ),
                     ),
                     Container(
                       height: 60,
-                      child: ListView.builder(
+                      child: ListView(
                         scrollDirection: Axis.horizontal,
-                        itemCount: widget.data.questions.length,
-                        itemBuilder: (context, i) {
-                          return GestureDetector(
-                            onTap: () {
-                              controller.text =
-                                  widget.data.questions.elementAt(i);
-                              getAnswer();
-                            },
-                            child: Padding(
-                              padding: const EdgeInsets.all(8.0),
-                              child: Chip(
-                                label: Text(widget.data.questions.elementAt(i)),
-                              ),
-                            ),
-                          );
-                        },
+                        children: suggestedQuestions,
                       ),
                     ),
                     Row(
@@ -98,7 +114,10 @@ class _QuestionAnswererPageState extends State<QuestionAnswererPage> {
                         ),
                         IconButton(
                           onPressed: getAnswer,
-                          icon: Icon(Icons.arrow_right_alt_rounded),
+                          icon: Icon(
+                            Icons.arrow_upward_sharp,
+                            color: Colors.orange,
+                          ),
                         )
                       ],
                     ),

example/bert_question_answer/pubspec.lock

@@ -123,6 +123,27 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "0.14.2"
+  google_fonts:
+    dependency: "direct main"
+    description:
+      name: google_fonts
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "2.1.0"
+  http:
+    dependency: transitive
+    description:
+      name: http
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "0.13.3"
+  http_parser:
+    dependency: transitive
+    description:
+      name: http_parser
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "4.0.0"
   image:
     dependency: transitive
     description:
@@ -235,6 +256,13 @@ packages:
       url: "https://pub.dartlang.org"
     source: hosted
     version: "3.0.1"
+  random_color:
+    dependency: "direct main"
+    description:
+      name: random_color
+      url: "https://pub.dartlang.org"
+    source: hosted
+    version: "1.0.6-nullsafety"
   riverpod:
     dependency: "direct main"
     description:
@@ -316,7 +344,7 @@ packages:
       path: "../.."
       relative: true
     source: path
-    version: "0.2.1"
+    version: "0.2.2"
   tuple:
     dependency: transitive
     description:

example/bert_question_answer/pubspec.yaml

@@ -29,7 +29,8 @@ dependencies:
   path_provider:
   riverpod: ^0.14.0+3
   cupertino_icons: ^1.0.2
-
+  google_fonts: ^2.1.0
+  random_color: ^1.0.6-nullsafety
 dev_dependencies:
   flutter_test:
     sdk: flutter