Welcome to this tutorial where we'll be enhancing the UI of a simple calculator app using Flutter, drawing inspiration from a beautiful design on Dribbble. In this tutorial, we'll explore how to transform the appearance of the calculator app by implementing a captivating and user-friendly user interface.
Calculators are a common tool, and by improving the UI of our calculator app, we can create a visually appealing and engaging user experience. We'll walk through the step-by-step process of refining the design elements, making it more intuitive and aesthetically pleasing.
To begin, we'll set up our Flutter project and ensure we have the necessary dependencies installed. With the foundation in place, we'll dive into modifying the existing UI to align with the design from Dribbble. By leveraging Flutter's powerful widget system, we'll customize buttons, layouts, and colors to give the calculator a fresh and captivating look.
Throughout the tutorial, we'll focus solely on the UI enhancements, making adjustments to the visual elements and overall styling. We'll pay attention to details such as typography, color schemes, spacing, and alignment to create a visually coherent and delightful UI.
By the end of this tutorial, you'll have a transformed calculator app with an upgraded user interface, making it more visually appealing and user-friendly. You'll gain valuable experience in modifying Flutter UI components and exploring design concepts to enhance the overall look and feel of your applications.
So, let's embark on this journey to elevate the UI of our calculator app using Flutter, drawing inspiration from a stunning design on Dribbble!
Setting Up the Flutter App's Root Structure
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
home: MyHomePage(),
);
}
}
The main() function serves as the entry point of the Flutter app. It runs the app by calling runApp() and passing in an instance of the MyApp class.
The MyApp class is a StatelessWidget that represents the root of the application. It overrides the build method to return a MaterialApp widget, which configures the app's settings and theme.
Within the MaterialApp, the debugShowCheckedModeBanner property is set to false to hide the debug banner, and the title property is set to "Flutter Demo".
The home property of MaterialApp is set to an instance of MyHomePage, which will be the initial screen of your app.
The MyHomePage class, which is not provided in the code snippet, should be defined as a StatelessWidget or StatefulWidget and represent the main screen of your app. It should be responsible for rendering the UI and handling user interactions.
Overall, the code sets up the basic structure of the app and configures the root of the application with the MaterialApp. You can proceed to implement the MyHomePage class to build and customize the UI and functionality of your app.
Basic Home Screen Structure
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Color(0xff22252D),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 240.0,
color: Color(0xff22252D),
padding: EdgeInsets.only(top: 150.0),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xff292D36),
),
),
),
],
),
),
),
);
}
}
The provided code represents the MyHomePage class, which serves as the main screen of your calculator app.
Inside the build method, a Scaffold widget is returned, providing the basic structure for the app layout. The Scaffold contains a SafeArea widget to ensure the content is displayed within the safe area of the device screen.
The main content is wrapped inside a Container widget, which has a background color of Color(0xff22252D). This container represents the main body of the screen and is divided into two sections.
- Display Section:
- This section is represented by a
Containerwith a height of 240.0 and the same background color as the main container. - Currently, there is no content inside this container, as the code only sets its height and background color.
- This section is represented by an
Expandedwidget, which takes up the remaining available space in the container. - Inside the
Expandedwidget, there is aContainerthat serves as the background for the button section, with a color ofColor(0xff292D36). - Currently, there is no content inside this container, as the code only sets its color.
- This section is represented by a
Overall, the code provides the basic structure for the main screen of your calculator app. As shown below👇
Basic Calculator UI Implementation
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Color(0xff22252D),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 240.0,
color: Color(0xff22252D),
padding: EdgeInsets.only(top: 150.0),
//New changes happen below 👇
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
textAlign: TextAlign.right,
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white,
),
"302 x 75",
),
Text(
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 45.0,
color: Colors.white,
),
"22650",
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xff292D36),
),
),
),
],
),
),
),
);
}
}
- Inside the first
Container, aColumnwidget is added. This allows for the vertical arrangement of multiple child widgets. - Within the
Columnwidget, twoTextwidgets are added. These are used to display text elements on the screen. - The first
Textwidget is aligned to the right (textAlign: TextAlign.right) and styled with a font size of 25.0 and white color. - The text content of the first
Textwidget is set to "302 x 75", which is dummy data used for setting up the UI. - The second
Textwidget is also aligned to the right and styled with a font size of 45.0, white color, and a bold font weight. - The text content of the second
Textwidget is set to "22650", which is also dummy data used for setting up the UI..
These changes enhance the appearance of the home screen by adding a visually appealing section with two text elements that display dummy data, specifically "302 x 75" and "22650". Please note that these values are placeholders and can be replaced with actual data in your calculator app in further steps.
First row of button
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Color(0xff22252D),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 240.0,
color: Color(0xff22252D),
padding: EdgeInsets.only(top: 150.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
textAlign: TextAlign.right,
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white,
),
"302 x 75",
),
Text(
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 45.0,
color: Colors.white,
),
"22650",
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xff292D36),
),
child: Column(
children: [
//New changes happen below 👇
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 20.0),
child: TextButton(
onPressed: () {
print("ac");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"AC",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 20.0),
child: TextButton(
onPressed: () {
print("+/-");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"+/-",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 20.0),
child: TextButton(
onPressed: () {
print("ac");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.divide,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6)),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 20.0),
child: TextButton(
onPressed: () {
print("ac");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text("AC"),
),
),
],
)
],
),
),
),
],
),
),
),
);
}
}
The updated code focuses on improving the calculator interface by introducing a button UI and utilizing the TextButton widget for interactive functionality. The code includes the implementation of various buttons that are essential for performing calculator operations.
The buttons are arranged in a Row widget, enabling them to be displayed horizontally, creating a compact and visually appealing layout. Each button is styled with specific attributes such as size, background color, and text/icon color to ensure consistency and aesthetic appeal.
To accommodate the buttons and other elements of the calculator interface, a Column widget is introduced within an Expanded container. This arrangement allows for proper spacing and layout management, ensuring a visually coherent and organized interface.
The newly added buttons provide essential functionality to the calculator. For instance, the "AC" button, when pressed, clears the input and resets the calculator, providing a convenient way to start fresh. The "+/-" button allows users to change the sign of the displayed number, facilitating calculations involving positive and negative values.
Additionally, a "mod" button is included, represented by the "%" symbol. This button performs the modulus operation, calculating the remainder of a division operation. It offers an essential feature for users working with modular arithmetic.
The TextButton widget is used to create these buttons, providing a responsive and interactive user experience. Each button is styled with attention to detail, ensuring visual coherence and intuitive design. The size, background color, and text/icon color are carefully selected to match the overall aesthetics of the calculator interface.
By incorporating these changes, the calculator UI becomes more interactive and user-friendly. Users can now perform calculations and operations efficiently by utilizing the provided buttons. The enhanced button functionality enhances the overall usability and user experience of the calculator app.
This comprehensive update brings a more engaging and functional calculator interface, making it easier for users to perform calculations and interact with the app effectively.
A Sleek and Intuitive Interface for a Basic Calculator
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Color(0xff22252D),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 240.0,
color: Color(0xff22252D),
padding: EdgeInsets.only(top: 150.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
textAlign: TextAlign.right,
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white,
),
"302 x 75",
),
Text(
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 45.0,
color: Colors.white,
),
"22650",
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xff292D36),
),
child: Column(
children: [
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("ac");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"AC",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("+/-");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.minus_slash_plus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6)),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("%");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"%",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("/");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.divide,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),
),
),
],
),
//New Changes happen below👇
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("7");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"7",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("8");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"8",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("9");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"9",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("x");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.multiply,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("4");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"4",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("5");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"5",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("6");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"6",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("-");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.minus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("1");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"1",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("2");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"2",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("3");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"3",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("+");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.plus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("reset");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.restart,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("0");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
"0",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print(".");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Text(
".",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),
),
),
Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("=");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: Icon(
CupertinoIcons.equal,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),
),
),
],
),
],
),
),
),
],
),
),
),
);
}
}
The updated code introduces several new features to the calculator interface. Here's a breakdown of the changes:
Plus/Minus Button: The code includes a "±" button represented by the
CupertinoIcons.minus_slash_plusicon. This button allows users to toggle between positive and negative numbers, providing flexibility in performing calculations.Percentage Button: The code introduces a "%" button, allowing users to calculate percentages easily. This button enables users to calculate values like discounts, interest rates, or any other percentage-based calculations.
Styling Changes: The code incorporates some styling changes to enhance the visual appeal and usability of the calculator. The buttons now have different background colors, making them visually distinguishable. Additionally, the icons have different colors based on their functionality, improving the overall clarity of the interface.
Additional Rows: The updated code expands the calculator interface by adding more rows of buttons. These rows include numeric buttons (0-9) and arithmetic operation buttons like addition (+), subtraction (-), multiplication (×), and division (÷). The additional buttons allow users to perform a wider range of calculations efficiently.
By incorporating these new features and enhancements, the updated code provides users with a more comprehensive and user-friendly calculator experience.
Improved Button Refactoring Enhances Code Organization and Reusability
The code snippet provided showcases the refactoring of the calculator's button functionality into a separate class called "button." This refactoring improves code organization and promotes reusability.
The "button" class is a StatelessWidget that takes a required parameter named "bname," which represents the content of the button (either text or an icon). Inside the build method, the class returns a Padding widget containing a TextButton.
The appearance of the button is customized using the ButtonStyle property, which sets the fixedSize to a specific width and height (75.0, 70.0 in this case) and the backgroundColor to a dark color (0xff272B34). The content of the button, represented by the "bname" parameter, is passed to the child property of the TextButton.
By encapsulating the button functionality in a separate class, it allows for better code organization and reusability. This approach makes it easier to customize button properties and enables the reuse of buttons throughout the application, providing a more modular and maintainable code structure.
Refactored code is shown below 👇
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test123/button.dart';
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
color: Color(0xff22252D),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
height: 240.0,
color: Color(0xff22252D),
padding: EdgeInsets.only(top: 150.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
textAlign: TextAlign.right,
style: TextStyle(
// fontWeight: FontWeight.bold,
fontSize: 25.0,
color: Colors.white,
),
"302 x 75",
),
Text(
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 45.0,
color: Colors.white,
),
"22650",
),
],
),
),
Expanded(
child: Container(
decoration: BoxDecoration(
color: Color(0xff292D36),
),
child: Column(
children: [
Row(
children: [
button(bname: Text(
"AC",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),),
button(bname: Icon(
CupertinoIcons.minus_slash_plus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6)),
),),
button(bname: Text(
"%",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xff26E8C6),
),
),
),),
button(bname: Icon(
CupertinoIcons.divide,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),),
],
),
Row(
children: [
button(bname: Text(
"7",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"8",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"9",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Icon(
CupertinoIcons.multiply,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),),
],
),
Row(
children: [
button(bname: Text(
"4",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"5",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"6",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Icon(
CupertinoIcons.minus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),),
],
),
Row(
children: [
button(bname: Text(
"1",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"2",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
"3",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Icon(
CupertinoIcons.plus,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),),
],
),
Row(
children: [
button(bname: Icon(
CupertinoIcons.restart,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white),
),),
button(bname: Text(
"0",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Text(
".",
style: TextStyle(
fontSize: 25.0,
color: MaterialStateColor.resolveWith(
(states) => Colors.white,
),
),
),),
button(bname: Icon(
CupertinoIcons.equal,
size: 30.0,
color: MaterialStateColor.resolveWith(
(states) => Color(0xffE78388)),
),),
],
),
],
),
),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
class button extends StatelessWidget {
var bname;
button({required this.bname});
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.only(left: 20.0, top: 10.0),
child: TextButton(
onPressed: () {
print("ac");
},
style: ButtonStyle(
fixedSize: MaterialStateProperty.all(
Size(75.0, 70.0)),
backgroundColor: MaterialStateProperty.all(
Color(0xff272B34))),
child: bname
),
);
}
}
Top comments (1)
Nice tutorial