modify layout and add function to print error and text translate

motula_translate_app/lib/screens/home/components/words_screen.dart

@@ -17,7 +17,7 @@ class WordsScreen extends StatefulWidget {
 class _WordsScreenState extends State<WordsScreen> {
   Future<Word> fetchWord() async {
     final response = await http.get(
-        Uri.parse("https://5ddc-37-101-56-133.ngrok-free.app/api/words/tasto"));
+        Uri.parse("https://9152-37-101-56-133.ngrok-free.app/api/words/tasto"));
 
     if (response.statusCode == 200) {
       return Word.fromJson(jsonDecode(response.body));
@@ -32,12 +32,12 @@ class _WordsScreenState extends State<WordsScreen> {
       future: fetchWord(),
       builder: (context, snapshot) {
         if (snapshot.hasData) {
-          // Display the fetched joke when data is available
-          return Center(child: Text(
+          // Display the fetched Word when data is available
+          return Text(
               snapshot.data!.translation,
-              style: TextStyle(fontSize: 30, color: Colors.grey[800])
-            )
-          );
+              style: const TextStyle(fontSize: 30, color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold)
+            );
+
         } else if (snapshot.hasError) {
           // Display an error message if there's an error
           return Text('${snapshot.error}');

motula_translate_app/lib/screens/home/home_screen.dart

@@ -5,7 +5,9 @@ import 'components/words_screen.dart';
 
 
 class HomePage extends StatelessWidget {
-  const HomePage({super.key});
+  HomePage({super.key});
+  final TextEditingController _textHomepageContoller = TextEditingController();
+  late List<WordsScreen> listaWidget;
 
   @override
   Widget build(BuildContext context) {
@@ -22,15 +24,16 @@ class HomePage extends StatelessWidget {
               Row(
                   mainAxisAlignment: MainAxisAlignment.center,
                   children: [
-                Image.asset('assets/icons/italy.png', width: 50, height: 50),
+                Image.asset('assets/icons/italy.png', width: 40, height: 40),
                 const SizedBox(width: 20),
                 Image.asset('assets/icons/next.png', width: 30, height:30),
                 const SizedBox(width: 10),
                 //Text('  -->  ', style: TextStyle(fontSize: 30, color: Colors.grey[800])),
-                Image.asset('assets/icons/flagMottola.png', width: 64, height: 64),
+                Image.asset('assets/icons/flagMottola.png', width: 54, height: 54),
               ]),
               const SizedBox(height: 20),
               TextField(
+                controller: _textHomepageContoller,
                 keyboardType: TextInputType.multiline,
                 maxLines: null,
                 style: TextStyle(fontSize: 20, color: Colors.grey[800]),
@@ -40,20 +43,60 @@ class HomePage extends StatelessWidget {
                 ),
               ),
               const SizedBox(height: 20),
-              ElevatedButton(
-                  onPressed: () {
-
-                  },
-                  child: Text('Traduci'),
-                  style: ElevatedButton.styleFrom(
-                  backgroundColor: Colors.orange,
-                  padding: const EdgeInsets.symmetric(horizontal: 50, vertical: 20),
-                  textStyle: const TextStyle(
-                      fontSize: 15,
-                      fontWeight: FontWeight.bold)),
+              Container(
+                margin: const EdgeInsets.all(10.0),
+                width:  500,
+                height: 100,
+                decoration: BoxDecoration(
+                  color: const Color(0x9121781C),
+                  borderRadius: BorderRadius.circular(10.0),
+                ),
+                child: const Column(
+                    mainAxisAlignment: MainAxisAlignment.center,
+                    crossAxisAlignment: CrossAxisAlignment.center,
+                    children: [
+                      WordsScreen(),
+                      //Align(
+                      //  alignment: Alignment.center,
+                      //  child: Text("ESEMPIO",
+                      //      style: TextStyle(fontSize: 30, color: Color(0xFFFFFFFF),fontWeight: FontWeight.bold)),
+                      //),
+                    ]
+                ),
               ),
-              const SizedBox(height: 30),
-              WordsScreen(),
+              const SizedBox(height: 20),
+              TextButton(
+                onPressed: () {
+                  showDialog(
+                    context: context,
+                    builder: (context) {
+                      if (_textHomepageContoller.text.isEmpty){
+                        return const AlertDialog(
+
+                          content: Text('Inserisci la parola italiana da tradurre', style: TextStyle(color: Color(
+                              0xFFFF0000), fontSize: 25, fontWeight: FontWeight.bold)),
+                        );
+                      }else{
+                        //return AlertDialog(
+                          // Retrieve the text the that user has entered by using the
+                          // TextEditingController.
+                        //  content: Text(_textHomepageContoller.text),
+                        //);
+
+                        return WordsScreen();
+                      }
+                    },
+                  );
+                },
+                child: Text('Traduci'),
+                style: ElevatedButton.styleFrom(
+                    backgroundColor: const Color(0xFFDF930B),
+                    padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
+                    textStyle: const TextStyle(
+                        fontSize: 15,
+                        fontWeight: FontWeight.bold)),
+              ),
+              //WordsScreen(),
             ],
           ),
         ),