Simple Dial Pad

Help General
1 
import 'package:flutter/material.dart'; 
 
void main() { 
  runApp(const MaterialApp( 
    debugShowCheckedModeBanner: false, 
    home: DialPad(), 
  )); 
} 
 
class DialPad extends StatefulWidget { 
  const DialPad({super.key}); 
 
  @override 
  State<DialPad> createState() => _DialPadState(); 
} 
 
class _DialPadState extends State<DialPad> { 
  // Function to handle button press and print its label 
  void _onButtonPressed(String label) { 
    print(label); 
  } 
 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      appBar: AppBar( 
        title: const Text( 
          "Dial Pad", 
          style: TextStyle(color: Colors.black, fontSize: 25), 
        ), 
        backgroundColor: Colors.blue[300], 
      ), 
      body: Column( 
        mainAxisAlignment: MainAxisAlignment.center, 
        children: [ 
          // First Row 
          Row( 
            mainAxisAlignment: MainAxisAlignment.center, 
            children: [ 
              _buildDialButton('1'), 
              _buildDialButton('2'), 
              _buildDialButton('3'), 
            ], 
          ), 
          // Second Row 
          Row( 
            mainAxisAlignment: MainAxisAlignment.center, 
            children: [ 
              _buildDialButton('4'), 
              _buildDialButton('5'), 
              _buildDialButton('6'), 
            ], 
          ), 
          // Third Row 
          Row( 
            mainAxisAlignment: MainAxisAlignment.center, 
            children: [ 
              _buildDialButton('7'), 
              _buildDialButton('8'), 
              _buildDialButton('9'), 
            ], 
          ), 
          // Fourth Row 
          Row( 
            mainAxisAlignment: MainAxisAlignment.center, 
            children: [ 
              _buildDialButton('*'), 
              _buildDialButton('0'), 
              _buildDialButton('#'), 
            ], 
          ), 
          const SizedBox(height: 20), 
          // Call Button 
          IconButton( 
            icon: const Icon(Icons.phone, color: Colors.green, 
size: 45), 
            onPressed: () => _onButtonPressed("call"), 
          ), 
        ], 
      ), 
    ); 
  } 
 
  // Widget to create dial pad buttons 
  Widget _buildDialButton(String label) { 
    return Padding( 
      padding: const EdgeInsets.all(8.0), 
      child: ElevatedButton( 
        onPressed: () => _onButtonPressed(label), 
        style: ElevatedButton.styleFrom( 
          shape: const CircleBorder(), // using circle border 
for button 
          padding: const EdgeInsets.all(20), 
          backgroundColor: Colors.white, // Button color 
          foregroundColor: Colors.purple, // Text color 
        ), 
        child: Text(label, style: const TextStyle(fontSize: 
24)), 
      ), 
    ); 
  } 
}
2

Could you explain what you want with posting this?

1 Like