diff --git a/lib/constants/strings/home_page_strings.dart b/lib/constants/strings/home_page_strings.dart new file mode 100644 index 0000000..c96e84c --- /dev/null +++ b/lib/constants/strings/home_page_strings.dart @@ -0,0 +1,5 @@ +const String callUsText = "Call Us:"; +const String phoneNumberText = "+91-97118 24118"; +const String emailUsText = "Email Us"; +const String emailText = "contactus@companyraahi.com"; +const String payNowText = 'PAY NOW'; diff --git a/lib/constants/theme/text_styles.dart b/lib/constants/theme/text_styles.dart new file mode 100644 index 0000000..c146050 --- /dev/null +++ b/lib/constants/theme/text_styles.dart @@ -0,0 +1,8 @@ +import 'package:flutter/material.dart'; + +const TextStyle callUsTextStyle = TextStyle( + fontSize: 12, + fontWeight: FontWeight.bold, +); +const TextStyle phoneNumTextStyle = TextStyle(fontSize: 12); +const TextStyle payNowTextStyle = TextStyle(fontSize: 16); diff --git a/lib/main.dart b/lib/main.dart index b9bfc38..f54b4a3 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,113 +1,18 @@ import 'package:flutter/material.dart'; +import 'package:sample/pages/home_page/home_page.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { - // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( - title: 'Flutter Demo', - theme: ThemeData( - // This is the theme of your application. - // - // Try running your application with "flutter run". You'll see the - // application has a blue toolbar. Then, without quitting the app, try - // changing the primarySwatch below to Colors.green and then invoke - // "hot reload" (press "r" in the console where you ran "flutter run", - // or simply save your changes to "hot reload" in a Flutter IDE). - // Notice that the counter didn't reset back to zero; the application - // is not restarted. - primarySwatch: Colors.blue, - ), - home: MyHomePage(title: 'Flutter Demo Home Page'), - ); - } -} - -class MyHomePage extends StatefulWidget { - MyHomePage({Key? key, required this.title}) : super(key: key); - - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - - final String title; - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - int _counter = 0; - - void _incrementCounter() { - setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. - _counter++; - }); - } - - @override - Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. - return Scaffold( - appBar: AppBar( - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. - title: Text(widget.title), - ), - body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. - child: Column( - // Column is also a layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Invoke "debug painting" (press "p" in the console, choose the - // "Toggle Debug Paint" action from the Flutter Inspector in Android - // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) - // to see the wireframe for each widget. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Text( - 'You have pushed the button this many times:', - ), - Text( - '$_counter', - style: Theme.of(context).textTheme.headline4, - ), - ], - ), - ), - floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, - tooltip: 'Increment', - child: Icon(Icons.add), - ), // This trailing comma makes auto-formatting nicer for build methods. + title: 'Static Website Flutter', + debugShowCheckedModeBanner: false, + theme: ThemeData(primarySwatch: Colors.blue), + home: MyHomePage(), ); } } diff --git a/lib/pages/home_page/home_page.dart b/lib/pages/home_page/home_page.dart new file mode 100644 index 0000000..38a934f --- /dev/null +++ b/lib/pages/home_page/home_page.dart @@ -0,0 +1,15 @@ +import 'package:flutter/material.dart'; +import 'package:sample/pages/home_page/widgets/header_ribbon.dart'; + +class MyHomePage extends StatelessWidget { + const MyHomePage({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return Scaffold( + body: HeaderRibbon(), + ); + } +} + + diff --git a/lib/pages/home_page/widgets/button_row.dart b/lib/pages/home_page/widgets/button_row.dart new file mode 100644 index 0000000..c76202b --- /dev/null +++ b/lib/pages/home_page/widgets/button_row.dart @@ -0,0 +1,40 @@ +import 'package:flutter/material.dart'; +import 'package:font_awesome_flutter/font_awesome_flutter.dart'; + +class ButtonRow extends StatelessWidget { + const ButtonRow({ + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Row( + children: [ + IconButton( + icon: FaIcon(FontAwesomeIcons.facebook), + onPressed: () {}, + color: Colors.blue[900], + iconSize: 30, + ), + IconButton( + icon: FaIcon(FontAwesomeIcons.linkedin), + onPressed: () {}, + color: Colors.blue[700], + iconSize: 30, + ), + IconButton( + icon: FaIcon(FontAwesomeIcons.whatsapp), + onPressed: () {}, + color: Colors.green[700], + iconSize: 30, + ), + IconButton( + icon: FaIcon(FontAwesomeIcons.facebookMessenger), + onPressed: () {}, + color: Colors.blue, + iconSize: 30, + ), + ], + ); + } +} diff --git a/lib/pages/home_page/widgets/header_ribbon.dart b/lib/pages/home_page/widgets/header_ribbon.dart new file mode 100644 index 0000000..16b2555 --- /dev/null +++ b/lib/pages/home_page/widgets/header_ribbon.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; +import 'package:sample/constants/strings/home_page_strings.dart'; +import 'package:sample/pages/home_page/widgets/ribbon_widget.dart'; +import 'package:sample/shared/widgets/custom_rounded_button.dart'; + +import 'button_row.dart'; + +class HeaderRibbon extends StatelessWidget { + const HeaderRibbon({ + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return Container( + margin: const EdgeInsets.symmetric(horizontal: 12), + color: Color(0xffF8F8F8), + height: 46, + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Row( + children: [ + RibbonTile(boldText: callUsText, text: phoneNumberText), + VerticalDivider(), + RibbonTile(boldText: emailUsText, text: emailText), + ], + ), + Row( + children: [ + CustomRoundedButton(), + ButtonRow(), + ], + ), + ], + ), + ); + } +} diff --git a/lib/pages/home_page/widgets/ribbon_widget.dart b/lib/pages/home_page/widgets/ribbon_widget.dart new file mode 100644 index 0000000..ba283ac --- /dev/null +++ b/lib/pages/home_page/widgets/ribbon_widget.dart @@ -0,0 +1,24 @@ +import 'package:flutter/material.dart'; +import 'package:sample/constants/theme/text_styles.dart'; + +class RibbonTile extends StatelessWidget { + const RibbonTile({ + Key? key, + required this.boldText, + required this.text, + }) : super(key: key); + + final String boldText; + final String text; + + @override + Widget build(BuildContext context) { + return Row( + children: [ + Text(boldText, style: callUsTextStyle), + SizedBox(width: 4), + Text(text, style: phoneNumTextStyle), + ], + ); + } +} diff --git a/lib/shared/widgets/custom_rounded_button.dart b/lib/shared/widgets/custom_rounded_button.dart new file mode 100644 index 0000000..e301129 --- /dev/null +++ b/lib/shared/widgets/custom_rounded_button.dart @@ -0,0 +1,35 @@ +import 'package:flutter/material.dart'; +import 'package:sample/constants/strings/home_page_strings.dart'; +import 'package:sample/constants/theme/text_styles.dart'; + +class CustomRoundedButton extends StatelessWidget { + const CustomRoundedButton({ + Key? key, + }) : super(key: key); + + @override + Widget build(BuildContext context) { + return TextButton( + style: ButtonStyle( + padding: MaterialStateProperty.all( + EdgeInsets.symmetric(vertical: 5.0, horizontal: 12.0), + ), + foregroundColor: MaterialStateProperty.all(Colors.white), + backgroundColor: MaterialStateProperty.all(Color(0xff43C6AC)), + shape: MaterialStateProperty.all( + RoundedRectangleBorder( + borderRadius: BorderRadius.circular(50), + ), + ), + ), + onPressed: () {}, + child: Padding( + padding: const EdgeInsets.symmetric( + horizontal: 12.0, + vertical: 4, + ), + child: Text(payNowText, style: payNowTextStyle), + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 7ffced4..f6c096c 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -67,6 +67,13 @@ packages: description: flutter source: sdk version: "0.0.0" + font_awesome_flutter: + dependency: "direct main" + description: + name: font_awesome_flutter + url: "https://pub.dartlang.org" + source: hosted + version: "9.0.0" matcher: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 101bbcf..6d85374 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,20 +1,8 @@ name: sample description: A new Flutter project. -# The following line prevents the package from being accidentally published to -# pub.dev using `pub publish`. This is preferred for private packages. -publish_to: 'none' # Remove this line if you wish to publish to pub.dev +publish_to: "none" -# The following defines the version and build number for your application. -# A version number is three numbers separated by dots, like 1.2.43 -# followed by an optional build number separated by a +. -# Both the version and the builder number may be overridden in flutter -# build by specifying --build-name and --build-number, respectively. -# In Android, build-name is used as versionName while build-number used as versionCode. -# Read more about Android versioning at https://developer.android.com/studio/publish/versioning -# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. -# Read more about iOS versioning at -# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html version: 1.0.0+1 environment: @@ -24,53 +12,12 @@ dependencies: flutter: sdk: flutter - - # The following adds the Cupertino Icons font to your application. - # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 + font_awesome_flutter: ^9.0.0 dev_dependencies: flutter_test: sdk: flutter -# For information on the generic Dart part of this file, see the -# following page: https://dart.dev/tools/pub/pubspec - -# The following section is specific to Flutter. flutter: - - # The following line ensures that the Material Icons font is - # included with your application, so that you can use the icons in - # the material Icons class. uses-material-design: true - - # To add assets to your application, add an assets section, like this: - # assets: - # - images/a_dot_burr.jpeg - # - images/a_dot_ham.jpeg - - # An image asset can refer to one or more resolution-specific "variants", see - # https://flutter.dev/assets-and-images/#resolution-aware. - - # For details regarding adding assets from package dependencies, see - # https://flutter.dev/assets-and-images/#from-packages - - # To add custom fonts to your application, add a fonts section here, - # in this "flutter" section. Each entry in this list should have a - # "family" key with the font family name, and a "fonts" key with a - # list giving the asset and other descriptors for the font. For - # example: - # fonts: - # - family: Schyler - # fonts: - # - asset: fonts/Schyler-Regular.ttf - # - asset: fonts/Schyler-Italic.ttf - # style: italic - # - family: Trajan Pro - # fonts: - # - asset: fonts/TrajanPro.ttf - # - asset: fonts/TrajanPro_Bold.ttf - # weight: 700 - # - # For details regarding fonts from package dependencies, - # see https://flutter.dev/custom-fonts/#from-packages