feat: Page de composition in progress

lib/pages/composition.dart

@@ -0,0 +1,128 @@
+import 'package:flutter/material.dart';
+
+class CompositionPage extends StatefulWidget {
+  const CompositionPage({super.key});
+
+  @override
+  _CompositionPageState createState() => _CompositionPageState();
+}
+
+class _CompositionPageState extends State<CompositionPage> {
+  String dialedNumber = "";
+
+
+  void _onNumberPress(String number) {
+    setState(() {
+      dialedNumber += number;
+    });
+  }
+
+
+  void _onDeletePress() {
+    setState(() {
+      if (dialedNumber.isNotEmpty) {
+        dialedNumber = dialedNumber.substring(0, dialedNumber.length - 1);
+      }
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: Colors.black,
+      body: Column(
+        children: [
+          Expanded(
+            flex: 1,
+            child: Center(
+              child: Text(
+                dialedNumber,
+                style: const TextStyle(
+                  fontSize: 32,
+                  color: Colors.white,
+                  letterSpacing: 2.0,
+                ),
+              ),
+            ),
+          ),
+          Expanded(
+            flex: 3,
+            child: Padding(
+              padding: const EdgeInsets.all(16.0),
+              child: GridView.builder(
+                gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+                  crossAxisCount: 3,
+                  mainAxisSpacing: 10,
+                  crossAxisSpacing: 10,
+                  childAspectRatio: 1,
+                ),
+                itemCount: 12,
+                itemBuilder: (context, index) {
+                  if (index < 9) {
+                  
+                    return _buildDialButton((index + 1).toString());
+                  } else if (index == 9) {
+                  
+                    return const SizedBox.shrink();
+                  } else if (index == 10) {
+                  
+                    return _buildDialButton('0');
+                  } else {
+                  
+                    return _buildDeleteButton();
+                  }
+                },
+              ),
+            ),
+          ),
+          Padding(
+            padding: const EdgeInsets.only(bottom: 20.0),
+            child: FloatingActionButton(
+              backgroundColor: Colors.green,
+              onPressed: () {
+              
+              },
+              child: const Icon(Icons.phone, color: Colors.white),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+
+  Widget _buildDialButton(String number) {
+    return ElevatedButton(
+      onPressed: () => _onNumberPress(number),
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.black,
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(20),
+      ),
+      child: Text(
+        number,
+        style: const TextStyle(
+          fontSize: 24,
+          color: Colors.white,
+        ),
+      ),
+    );
+  }
+
+
+  Widget _buildDeleteButton() {
+    return ElevatedButton(
+      onPressed: _onDeletePress,
+      style: ElevatedButton.styleFrom(
+        backgroundColor: Colors.black,
+        shape: const CircleBorder(),
+        padding: const EdgeInsets.all(20),
+      ),
+      child: const Icon(
+        Icons.backspace,
+        color: Colors.white,
+        size: 24,
+      ),
+    );
+  }
+}

lib/pages/myHomePage.dart

@@ -1,6 +1,7 @@
 import 'package:dialer/pages/contact.dart';
 import 'package:dialer/pages/favorites.dart';
 import 'package:dialer/pages/history.dart';
+import 'package:dialer/pages/composition.dart';
 import 'package:flutter/material.dart';
 
 class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
@@ -9,8 +10,9 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
   @override
   void initState() {
     super.initState();
-    _tabController = TabController(length: 2, vsync: this, initialIndex: 1);
+    _tabController = TabController(length: 4, vsync: this, initialIndex: 1);
     _tabController.addListener(_handleTabIndex);
+    
   }
 
   @override
@@ -25,35 +27,66 @@ class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateM
   }
 
   @override
-  Widget build(BuildContext context) {
-    return Scaffold(
-      backgroundColor: Colors.black,
-      body: TabBarView(
-        controller: _tabController,
-        children: const [
-          FavoritePage(), // Page des favoris
-          HistoryPage(), // Page de l'historique
-          ContactPage(), // Page des contacts
-        ],
-      ),
-      bottomNavigationBar: Container(
-        color: Colors.black,
-        child: TabBar(
+Widget build(BuildContext context) {
+  return Scaffold(
+    backgroundColor: Colors.black,
+    body: Stack(
+      children: [
+        TabBarView(
           controller: _tabController,
-          tabs: [
-            Tab(icon: Icon(_tabController.index == 0 ? Icons.star : Icons.star_border)),
-            Tab(icon: Icon(_tabController.index == 1 ? Icons.access_time_filled : Icons.access_time_outlined)),
-            Tab(icon: Icon(_tabController.index == 2 ? Icons.contacts : Icons.contacts_outlined)),
+          children: const [
+            FavoritePage(),
+            HistoryPage(),
+            ContactPage(),
+            CompositionPage(),
           ],
-          labelColor: Colors.white,
-          unselectedLabelColor: Colors.grey,
-          indicatorSize: TabBarIndicatorSize.label,
-          indicatorPadding: const EdgeInsets.only(bottom: -0), // Ajustez le padding pour élever la ligne blanche au-dessus des icônes si nécessaire
-          indicatorColor: Colors.white, // Couleur de la barre horizontale blanche
         ),
+        if (_tabController.index != 3)
+        Positioned(
+          right: 20,
+          bottom: 20,
+          child: FloatingActionButton(
+            onPressed: () {
+            
+              _tabController.animateTo(3);
+            },
+            backgroundColor: Colors.blue,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(45),
+            ),
+            child: Padding(
+              padding: const EdgeInsets.all(8.0),
+              child: Column(
+                mainAxisSize: MainAxisSize.min,
+                mainAxisAlignment: MainAxisAlignment.center,
+                children: const [
+                  Icon(Icons.dialpad, color: Colors.white),
+                ],
+              ),
+            ),
+          ),
+        ),
+      ],
+    ),
+    bottomNavigationBar: Container(
+      color: Colors.black,
+      child: TabBar(
+        controller: _tabController,
+        tabs: [
+          Tab(icon: Icon(_tabController.index == 0 ? Icons.star : Icons.star_border)),
+          Tab(icon: Icon(_tabController.index == 1 ? Icons.access_time_filled : Icons.access_time_outlined)),
+          Tab(icon: Icon(_tabController.index == 2 ? Icons.contacts : Icons.contacts_outlined)),
+          Tab(icon: Icon(_tabController.index == 3 ? Icons.create : Icons.create_outlined)),
+        ],
+        labelColor: Colors.white,
+        unselectedLabelColor: Colors.grey,
+        indicatorSize: TabBarIndicatorSize.label,
+        indicatorColor: Colors.white,
       ),
-    );
-  }
+    ),
+  );
+}
+
 }