News App UI

VishnuRaj-code/main.dart

@@ -0,0 +1,29 @@
+import 'package:flutter/material.dart';
+import 'package:newsapp/screen/home/details/detailNews.dart';
+import 'screen/home/config/themes/themes.dart';
+import 'screen/home/home_page.dart';
+
+void main() {
+  runApp(const MyApp());
+}
+
+class MyApp extends StatelessWidget {
+  const MyApp({Key? key}) : super(key: key);
+
+  // This widget is the root of your application.
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp(
+      debugShowCheckedModeBanner: false,
+      title: 'Flutter Demo',
+      theme: themes(),
+      routes: {
+        DetailNews.routeName:(ctx)=>DetailNews(),
+      }
+      ,
+      home:Homepage(),
+    );
+  }
+
+
+}

VishnuRaj-code/screen/home/config/themes/themes.dart

@@ -0,0 +1,19 @@
+import 'package:flutter/material.dart';
+
+ThemeData themes() {
+    return ThemeData(
+
+      primarySwatch: Colors.blue,
+      textTheme: TextTheme(
+        bodyText1: TextStyle(color: Colors.black45,
+
+      ),
+
+    ),
+    primaryTextTheme:TextTheme(
+      headline4: TextStyle(color:Colors.blueGrey,fontWeight:FontWeight.w600),
+      headline6:TextStyle(color:Colors.blueGrey),
+      bodyText1:TextStyle(color:Colors.blueGrey),
+    )
+    );
+  }

VishnuRaj-code/screen/home/config/var/var.dart

@@ -0,0 +1,4 @@
+
+final String profileImage='https://media.istockphoto.com/photos/woman-hacker-face-picture-id1147603755?b=1&k=20&m=1147603755&s=170667a&w=0&h=OlPOOjxOqBOlRCIs0tP3r1WLJ6o99anuBROeb6QihwI=';
+final String cricketImage='https://images.unsplash.com/photo-1589801258579-18e091f4ca26?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8OXx8Y3JpY2tldHxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=500&q=60';
+final String kanewilliamson='https://images.firstpost.com/wp-content/uploads/2021/11/Williamson-practiCE-Kanpur-640-AFP.jpg?impolicy=website&width=640&height=363';

VishnuRaj-code/screen/home/details/detailNews.dart

@@ -0,0 +1,48 @@
+import 'package:flutter/material.dart';
+import 'package:newsapp/screen/home/widget/mainbar.dart';
+
+class DetailNews extends StatelessWidget {
+  static const routeName = 'DetailName';
+  @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_sharp,
+            color: Colors.black,
+          ),
+        ),
+      ),
+      body: SafeArea(
+          child: SingleChildScrollView(
+        child: Padding(
+          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
+          child: Column(
+            crossAxisAlignment: CrossAxisAlignment.start,
+            children: [
+              Main_bar(),
+              const SizedBox(height: 15),
+              Text(
+              "The familiar foes meet again.It's only six months ago that the first cycle of the World Test Championship ended with New Zealand lifting the title. India's perennial nemesis in ICC tournaments, New Zealand, edged them in a tense final in Southampton. They got their team selection right, they utliised the conditions better than India and executed their plans with patience and perfection.It was a similar case five months later in the 2021 T20 World Cup where they outclassed India in a crunch match in Dubai. They reached the final but again couldn't get the final push to lift the trophy.And three days later, the knackered Kiwis met India again in the three-match T20I series. This time the tables had been turned as India overpowered them to achieve a 3-0 clean sweep.", style: Theme.of(context).textTheme.bodyText2 )
+            ],
+          ),
+        ),
+      )),
+    );
+  }
+}

VishnuRaj-code/screen/home/home_page.dart

@@ -0,0 +1,30 @@
+import 'package:flutter/material.dart';
+import 'widget/categorylist.dart';
+import 'widget/custom_tile.dart';
+import 'widget/customappbar.dart';
+import 'widget/recentnews.dart';
+import 'widget/titlebar.dart';
+
+
+class Homepage extends StatelessWidget {
+  const Homepage({Key? key}) : super(key: key);
+
+  @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),
+            Category_List(),
+            RecentNews(screenWidth: screenWidth),
+          ],
+        ),
+      ),
+    );
+  }
+}
+

VishnuRaj-code/screen/home/widget/categorylist.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+
+class Category_List extends StatelessWidget {
+  const Category_List({
+    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(8.0),
+            child: Text('All'),
+          ),
+           Padding(
+             padding: const EdgeInsets.all(8.0),
+             child: Text('sports',
+             style:TextStyle(decoration:TextDecoration.underline,decorationThickness:1,)),
+             ),
+          Padding(
+            padding: const EdgeInsets.all(8.0),
+            child: Text('global'),
+          ),
+
+        ],
+      ),
+    );
+  }
+}
+

VishnuRaj-code/screen/home/widget/custom_tile.dart

@@ -0,0 +1,95 @@
+import 'package:flutter/material.dart';
+import 'package:newsapp/screen/home/config/var/var.dart' as configvar;
+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: 80,
+              width: 100,
+              child: ClipRRect(
+                borderRadius: BorderRadius.circular(8),
+                child: Image.network(configvar.kanewilliamson,
+                    fit: BoxFit.cover),
+              ),
+            ),
+            const SizedBox(width: 10),
+            Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                Container(
+
+                  width: screenWidth * 0.65,
+                  child: Text(
+                    'Spin component will be a big factor in Test series, says Kane Williamson',
+                    style: Theme.of(context)
+                        .primaryTextTheme
+                        .bodyText1,
+                  ),
+                ),
+                const SizedBox(
+                  height: 12,
+                ),
+                Container(
+
+                  child: Row(
+                    mainAxisAlignment:
+                        MainAxisAlignment.spaceBetween,
+                    children: [
+                      Icontext(
+                          iconData: Icons.calendar_today,
+                          title: '23-11-2021'),
+                      const SizedBox(width: 0),
+
+                    ],
+                  ),
+                ),
+              ],
+            ),
+          ],
+        ));
+  }
+}
+
+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(Icons.calendar_today, size: 14),
+       Text('23-11-2021', style: Theme.of(context).textTheme.bodyText1),
+      const SizedBox(
+        width: 10,
+      ),
+     const SizedBox(
+        width: 39,
+
+      ),
+      Row(children: [
+      Icon(Icons.lock_clock, size: 14),
+      Text('7 min read', style: Theme.of(context).textTheme.bodyText1),
+      const SizedBox(
+        width: 13,
+
+      ),
+
+    ]
+      ),
+    ],
+    );
+  }
+}

VishnuRaj-code/screen/home/widget/customappbar.dart

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

VishnuRaj-code/screen/home/widget/mainbar.dart

@@ -0,0 +1,41 @@
+import 'package:flutter/material.dart';
+import 'package:newsapp/screen/home/config/var/var.dart' as configvar;
+class Main_bar extends StatelessWidget {
+
+  @override
+  Widget build(BuildContext context) {
+    final screenWidth = MediaQuery.of(context).size.width;
+
+    return Column(
+      children: [
+        ClipRRect(
+       borderRadius: BorderRadius.circular(14),
+       child: Image.network(configvar.cricketImage),
+      ),
+       const SizedBox(height:10),
+
+         Container(
+          width: screenWidth*0.8,
+        padding: const EdgeInsets.only(left:8.0),
+          child: Text("World Test Champions New Zealand face trial by spin in search for first series win on Indian soil",style:Theme.of(context).primaryTextTheme.headline6,)),
+       const SizedBox(height:15),
+         Row(
+           mainAxisAlignment: MainAxisAlignment.spaceBetween,
+         children: [
+           Row(
+             children: [
+                 CircleAvatar(
+               radius: 24,
+               backgroundImage: NetworkImage(configvar.profileImage)),
+           const SizedBox(width: 8),
+           Text('Jigar Mehta',
+               style: Theme.of(context).textTheme.bodyText1),
+             ],
+           ),
+          Text('24-11-2021',style: Theme.of(context).textTheme.bodyText1),
+        ],
+      ),
+      ],
+    );
+  }
+}

VishnuRaj-code/screen/home/widget/recentnews.dart

@@ -0,0 +1,25 @@
+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);
+        },
+      ),
+    );
+  }
+}
+

VishnuRaj-code/screen/home/widget/titlebar.dart

@@ -0,0 +1,34 @@
+import 'package:flutter/material.dart';
+import 'package:newsapp/screen/home/config/var/var.dart' as configvar;
+import 'package:newsapp/screen/home/details/detailNews.dart';
+
+import 'mainbar.dart';
+class titlebar extends StatelessWidget {
+  const titlebar({
+    Key? key,
+    required this.screenWidth,
+  }) : super(key: key);
+
+  final double screenWidth;
+
+  @override
+  Widget build(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical:10,horizontal:8),
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text('Breaking News',style:Theme.of(context).primaryTextTheme.headline4,),
+          const SizedBox(height:10),
+            GestureDetector (
+              onTap:() {Navigator.of(context).pushNamed(DetailNews.routeName);},
+              child: Main_bar()),
+
+
+        ],
+      ),
+    );
+  }
+}
+
+