The project is about a communicator.
Each screen uses this widget as the top bar of the screen. It's coded as it follows:
import 'exports.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';
class Bar extends StatefulWidget {
var message = [];
late String txt = '';
State<Bar> createState() => _BarState();
}
class _BarState extends State<Bar> {
Bar bar = Bar();
late FlutterTts tts;
void initState() {
super.initState();
initTts();
tts.setLanguage('ca');
}
void dispose() {
super.dispose();
tts.stop();
}
initTts() async {
tts = FlutterTts();
await tts.awaitSpeakCompletion(true);
}
Widget build(BuildContext context) {
return SafeArea(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 15),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
Navigator.of(context).push(MaterialPageRoute(builder:(context) => App()));
},
child: Image.asset('img/homeICON.png', width:100, height:100, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
Navigator.pop(context);
},
child: Image.asset('img/back.png', width:68, height:100, fit: BoxFit.cover)
),
const SizedBox(width: 10),
Scrollbar(
scrollbarOrientation: ScrollbarOrientation.bottom,
child: Container(
color: Colors.white,
width: 600,
height: 100,
),
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
print('TXT -> $txt');
speak();
},
child: Image.asset('img/play.png', width:80, height:100, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
},
child: Image.asset('img/delete.png', width:95, height:100, fit:
BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
},
child: Image.asset('img/trash.png', width:68, height:100, fit: BoxFit.cover)
),
],
),
);
}
Future speak() async {
await tts.setVolume(1);
await tts.setSpeechRate(0.5);
await tts.setPitch(1);
await tts.speak(bar.txt);
}
}
Looks like:
or
We are analyzing the screen Animals.dart.
Each ELevated Button represents a pictogram. When the user taps on it, it uses FlutterTts.speak to read its name loud. In addition, I want to create a phrase with all pictos that the user selects and play it when the play button of the top bar is pressed.
Animals.dart:
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';
import 'exports.dart';
class Animals extends StatefulWidget {
State<Animals> createState() => _AnimalsState();
}
class _AnimalsState extends State<Animals> {
App app = App();
Bar bar = Bar();
late FlutterTts tts;
void initState() {
super.initState();
initTts();
tts.setLanguage('ca');
}
initTts() async {
tts = FlutterTts();
await tts.awaitSpeakCompletion(true);
}
Widget build(BuildContext context) {
return Scaffold(
body: Container(
padding: const EdgeInsets.all(10),
child: Column(
children: [
Bar(),
const SizedBox(height: 50),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'cocodril';
bar.txt += 'cocodril';
speak();
},
child: Image.asset('img/cocodril.png', width:160,
height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'elefant';
bar.txt += 'elefant';
speak();
},
child: Image.asset('img/elefant.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'gos';
bar.txt += 'gos';
speak();
},
child: Image.asset('img/gos.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'lloro';
bar.txt += 'lloro';
speak();
},
child: Image.asset('img/lloro.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'peix';
bar.txt += 'peix';
speak();
},
child: Image.asset('img/peix.png', width:160, height:160,
fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'pingüi';
bar.txt += 'pingüi';
speak();
},
child: Image.asset('img/pingui.png', width:160,
height:160, fit: BoxFit.cover)
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'caball';
bar.txt += 'caball';
speak();
},
child: Image.asset('img/caball.png', width:160,
height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'ànec';
bar.txt += 'ànec';
speak();
},
child: Image.asset('img/anec.png', width:160, height:160,
fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'aranya';
bar.txt += 'aranya';
speak();
},
child: Image.asset('img/aranya.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'gat';
bar.txt += 'gat';
speak();
},
child: Image.asset('img/gat.png', width:160, height:160,
fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'hipopòtam';
bar.txt += 'hipopòtam';
speak();
},
child: Image.asset('img/hipopotam.png', width:160, height:160,
fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'serp';
bar.txt += 'serp';
speak();
},
child: Image.asset('img/serp.png', width:160,
height:160, fit: BoxFit.cover)
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'periquito';
bar.txt += 'periquito';
speak();
},
child: Image.asset('img/periquito.png', width:160,
height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'jàmster';
bar.txt += 'jàmster';
speak();
},
child: Image.asset('img/hamster.png', width:160, height:160,
fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'tortuga';
bar.txt += 'tortuga';
speak();
},
child: Image.asset('img/tortuga.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'ós';
bar.txt += 'ós';
speak();
},
child: Image.asset('img/os.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'ocell';
bar.txt += 'ocell';
speak();
},
child: Image.asset('img/ocell.png', width:160, height:160, fit: BoxFit.cover)
),
const SizedBox(width: 10),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
onPressed: () {
app.txt = 'peix pallaso';
bar.txt += 'peix pallaso';
speak();
},
child: Image.asset('img/peix_pallaso.png', width:160, height:160, fit: BoxFit.cover)
),
],
)
]
),
),
);
}
Future speak() async {
await tts.setVolume(1);
await tts.setSpeechRate(0.5);
await tts.setPitch(1);
if (app.txt != null) {
if (app.txt!.isNotEmpty) {
await tts.speak(app.txt!);
}
}
}
}
The pictogram associated word is read using the method speak.
The phrase created by all pictos pressesd by the user is in an attribute of the Bar.dart class.
With the purpose of creating a sigle sentence, each time a picto is pressed, also add the word at the sentence.
Can not understand why is not reading the sentence...
Any help?
Thanks in advance !