task3 completed

lib/main.dart

@@ -0,0 +1,21 @@
+import 'package:flutter/material.dart';
+import 'package:news/screen/details/detail_news.dart';
+import 'screen/config/themes/themes.dart';
+import 'screen/home/home_page.dart';
+
+void main() {
+  runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      title: 'Flutter Demo',
+      theme: themes(),
+      debugShowCheckedModeBanner: false,
+      routes: {DetailsNews.routeName: (ctx) => DetailsNews()},
+      home: Homepage(),
+    );
+  }
+}

lib/screen/config/themes/themes.dart

@@ -0,0 +1,14 @@
+import 'package:flutter/material.dart';
+
+ThemeData themes() {
+  return ThemeData(
+      primarySwatch: Colors.lightBlue,
+      textTheme: TextTheme(bodyText1: TextStyle(color: Colors.black45, fontStyle: FontStyle.italic)),
+      primaryTextTheme: TextTheme(
+        headline4:
+        TextStyle(color: Colors.black, fontWeight: FontWeight.w700, fontStyle: FontStyle.italic),
+        headline3: TextStyle(color: Colors.black, fontStyle: FontStyle.italic),
+        headline5: TextStyle(color: Colors.black54, fontSize: 20, fontStyle: FontStyle.italic),
+        bodyText1: TextStyle(color: Colors.black54, fontStyle: FontStyle.italic, fontSize: 20),
+      ));
+}

lib/screen/config/var/var.dart

@@ -0,0 +1,2 @@
+final String profileImage =
+    'https://images.unsplash.com/photo-1545996124-0501ebae84d0?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=464&q=80';

lib/screen/details/detail_news.dart

@@ -0,0 +1,47 @@
+import 'package:flutter/material.dart';
+import 'package:news/screen/home/widgets/main_bar.dart';
+
+class DetailsNews extends StatelessWidget {
+  static const routeName = 'DetailsNews';
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        backgroundColor: Colors.white,
+        elevation: 0,
+        actions: [
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Icon(
+              Icons.share,
+              color: Colors.black,
+            ),
+          ),
+        ],
+        leading: IconButton(
+            onPressed: () {
+              Navigator.of(context).pop();
+            },
+            icon: Icon(Icons.arrow_back_ios, color: Colors.black)),
+      ),
+      body: SafeArea(
+          child: SingleChildScrollView(
+            child: Padding(
+              padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 12),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.start,
+                children: [
+                  MainBar(),
+                  const SizedBox(height: 25),
+                  Text(
+                      'NEW DELHI: Indians are outpacing the rest of the world when it comes to cryptocurrency adoption even as investors are still awaiting the official verdict on cryptocurrency exchanges in the country', style: Theme.of(context).primaryTextTheme.bodyText1),
+                  SizedBox(height: 24),
+                  Text(
+                      'A study conducted by the portal BrokerChooses annual crypto proliferation index reveals that at over 10 crore, India has the largest number of crypto owners in the world followed by the US and Russia.', style: Theme.of(context).primaryTextTheme.bodyText1)
+                ],
+              ),
+            ),
+          )),
+    );
+  }
+}

lib/screen/home/home_page.dart

@@ -0,0 +1,25 @@
+import 'package:flutter/material.dart';
+import 'package:news/screen/home/widgets/category_list.dart';
+import 'package:news/screen/home/widgets/custom_app_bar.dart';
+import 'package:news/screen/home/widgets/recent_news.dart';
+import 'package:news/screen/home/widgets/title_bar.dart';
+
+class Homepage extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    return Scaffold(
+      body: SafeArea(
+        child: Column(
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            CustomAppBar(),
+            TitleBar(screenWidth: screenWidth),
+            CategoryList(),
+            RecentNews(screenWidth: screenWidth),
+          ],
+        ),
+      ),
+    );
+  }
+}

lib/screen/home/widgets/category_list.dart

@@ -0,0 +1,52 @@
+import 'package:flutter/material.dart';
+
+class CategoryList extends StatelessWidget {
+  const CategoryList({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      height: 50,
+      child: ListView(
+        scrollDirection: Axis.horizontal,
+        children: [
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('All'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('International'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('Media'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('Magazine'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('Business'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('National'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('Technology'),
+          ),
+          Padding(
+            padding: const EdgeInsets.all(10.0),
+            child: Text('Educational'),
+          ),
+        ],
+      ),
+      margin: EdgeInsets.all(25.0),
+    );
+  }
+}

lib/screen/home/widgets/custom_app_bar.dart

@@ -0,0 +1,27 @@
+import 'package:flutter/material.dart';
+import 'package:news/screen/config/var/var.dart' as configvar;
+
+class CustomAppBar extends StatelessWidget {
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 13, horizontal: 10),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Row(
+            children: [
+              CircleAvatar(
+                radius: 27,
+                backgroundImage: NetworkImage(configvar.profileImage),
+              ),
+              const SizedBox(width: 15),
+              Text('12 Sept, 2021', style: Theme.of(context).textTheme.bodyText1),
+            ],
+          ),
+          Icon(Icons.search, size: 20)
+        ],
+      ),
+    );
+  }
+}

lib/screen/home/widgets/custom_tile.dart

@@ -0,0 +1,79 @@
+import 'package:flutter/material.dart';
+
+class CustomTile extends StatelessWidget {
+  const CustomTile({
+    Key? key,
+    required this.screenWidth,
+  }) : super(key: key);
+
+  final double screenWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
+      child: Row(
+        children: [
+          Container(
+            height: 100,
+            width: 100,
+            child: ClipRRect(
+              borderRadius: BorderRadius.circular(10),
+              child: Image.network(
+                  'https://th.thgim.com/sport/cricket/5hw6cg/article36982011.ece/ALTERNATES/FREE_660/MPL'),
+            ),
+          ),
+          const SizedBox(width: 30),
+          Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Container(
+                width: screenWidth * 0.5,
+                child: Text(
+                  'Fan-inspired Indian team jersey for T20 World Cup unveiled',
+                  style: Theme.of(context)
+                      .primaryTextTheme
+                      .bodyText1!
+                      .merge(TextStyle(fontWeight: FontWeight.w700)),
+                ),
+              ),
+              const SizedBox(height: 22),
+              Container(
+                child: Row(
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    IconText(
+                        iconData: Icons.calendar_today, title: 'Sept 12, 2021'),
+                    const SizedBox(width: 30),
+                    IconText(iconData: Icons.lock_clock, title: '8 min Read')
+                  ],
+                ),
+              )
+            ],
+          )
+        ],
+      ),
+    );
+  }
+}
+
+class IconText extends StatelessWidget {
+  final IconData iconData;
+  final String title;
+
+  IconText({required this.iconData, required this.title});
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Icon(
+          iconData,
+          size: 17,
+        ),
+        const SizedBox(width: 8),
+        Text(title, style: Theme.of(context).textTheme.bodyText1),
+      ],
+    );
+  }
+}

lib/screen/home/widgets/main_bar.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:news/screen/details/detail_news.dart';
+
+class MainBar extends StatelessWidget {
+  const MainBar({
+    Key? key,
+  }) : super(key: key);
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+    return Column(
+      children: [
+        ClipRRect(
+          borderRadius: BorderRadius.circular(14),
+          child: Image.network(
+            'https://images.unsplash.com/photo-1543699539-33a389c5dcfe?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=2070&q=80',
+          ),
+        ),
+        SizedBox(height: 15),
+        Container(
+          width: screenWidth * 1,
+          padding: const EdgeInsets.only(left: 8),
+          child: Text(
+            'Over 10 crore Indians own cryptocurrency, highest in the world',
+            style: Theme.of(context).primaryTextTheme.headline5,
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/screen/home/widgets/recent_news.dart

@@ -0,0 +1,24 @@
+import 'package:flutter/material.dart';
+
+import 'custom_tile.dart';
+
+class RecentNews extends StatelessWidget {
+  const RecentNews({
+    Key? key,
+    required this.screenWidth,
+  }) : super(key: key);
+
+  final double screenWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return Expanded(
+      child: ListView.builder(
+        itemCount: 3,
+        itemBuilder: (BuildContext context, int index) {
+          return CustomTile(screenWidth: screenWidth);
+        },
+      ),
+    );
+  }
+}