DEV Community: CodeDecoders

The Future of Blockchain in Digital Security

Vatsal596 — Fri, 09 Feb 2024 13:34:09 +0000

In an era where digital threats are evolving at an unprecedented pace, the quest for robust digital security measures has never been more critical. Among the myriad of technologies vying to fortify digital defences, blockchain stands out as a beacon of hope. This decentralized technology, known for underpinning cryptocurrencies like Bitcoin, is making significant inroads into digital security, promising a future where data breaches and cyber threats could become relics of the past.

Understanding Blockchain's Security Premise

At its core, blockchain is a distributed ledger technology that records transactions across multiple computers in such a way that the registered transactions cannot be altered retroactively. This inherent characteristic of blockchain offers a foundational layer of security through decentralization. Unlike traditional security measures that rely on a central point of control (and hence a single point of failure), blockchain's decentralized nature distributes data across the network, making it virtually impossible for hackers to compromise the integrity of data.

Blockchain in Digital Security: Use Cases

1. Secure Identity Management

Identity theft and unauthorized access to personal data are rampant in the digital world. Blockchain can revolutionize how personal identities are stored and verified. By giving individuals control over their digital identities through private keys, blockchain can ensure that personal data is only accessed by its rightful owner, drastically reducing the potential for identity theft.

2. Enhanced Privacy Through Encryption

Blockchain's encryption capabilities provide an additional layer of security. Data on the blockchain is secured through complex cryptography, ensuring that information remains confidential and tamper-proof. This encryption mechanism is particularly vital for securing sensitive data, from financial transactions to personal records.

3. Decentralized Storage Solutions

The concept of decentralized storage, facilitated by blockchain, mitigates the risks associated with centralized data repositories, which are prime targets for cyber-attacks. Blockchain enables the distribution of data across a network of nodes, ensuring that even if parts of the network are compromised, the overall integrity and accessibility of data remain intact.

4. Immutable Audit Trails

Blockchain creates an immutable record of transactions, providing a transparent and unalterable history of events. This feature is invaluable for audit and compliance purposes, offering a clear trail of data exchanges, access, and modifications. It enhances trust and accountability in digital interactions, from supply chain operations to financial transactions.

Challenges and Considerations

While the potential of blockchain in enhancing digital security is immense, there are challenges to its widespread adoption. Scalability, energy consumption, and the integration with existing systems are significant hurdles. Moreover, the technology's nascent stage means that regulatory and standardization frameworks are still in development.

Looking Ahead

The future of blockchain in digital security is promising but requires careful navigation. As the technology matures and solutions to current challenges are developed, blockchain has the potential to redefine the landscape of digital security. Businesses and individuals alike stand to benefit from its adoption, enjoying a level of security that matches the digital age's demands.

In conclusion, the journey of blockchain from a cryptocurrency underpinning to a cornerstone of digital security is underway. Its principles of decentralization, transparency, and immutability are not just enhancing security measures but are laying the groundwork for a more secure digital future. As we move forward, the integration of blockchain into digital security strategies will not only be desirable but, quite possibly, essential.

Embracing Blockchain at CodeDecoders

As we envision the future of blockchain in digital security, it's imperative to highlight the proactive strides taken by companies like CodeDecoders in this transformative journey. As a forward-thinking software development company, CodeDecoders has not only kept pace with emerging technologies but has also been at the forefront of blockchain innovation.

Our commitment to leveraging blockchain technology is evident in our latest project, which aims to address some of the most pressing challenges in digital security today. By integrating blockchain's decentralized, transparent, and immutable nature into our solutions, we are pioneering a new era of digital security solutions that are not only secure but also resilient against evolving cyber threats.

At CodeDecoders, we understand that the future of digital security lies in technologies that can outpace and outsmart digital threats. Our dedication to blockchain technology is a testament to our commitment to providing state-of-the-art solutions to our clients. We believe that by harnessing the power of blockchain, we can offer unparalleled security features that stand the test of time and cyber threats.

As we continue to explore and expand our blockchain capabilities, we invite businesses and individuals to join us in this exciting journey towards a more secure digital future. With CodeDecoders, you're not just choosing a software development company; you're choosing a partner dedicated to innovating and securing your digital presence in the blockchain era.

In embracing blockchain, CodeDecoders is not just looking towards the future; we are actively shaping it. Join us as we pave the way for a more secure, decentralized, and transparent digital world.

Nested Scroll View Flutter

Kunal Jain — Sat, 22 Aug 2020 03:15:12 +0000

Hello guys, this blog post is a part of a video series we are started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:-

In this blog post, we will create the body of the homepage using Nested Scroll View.

Now in the project, We will create a new folder named screens/home in which create a homepage.dart a file.

Now let's create a StateFull Widget named HomePage().

HomePage() would return a NestedScrollView().

Now we replace the Container() in body of Home() from HomePage():-

In NestedScrollView, there is a parameter, headerSliverBuilder:-

headerSliverBuilder: (context, value) {
        return [
        ];
      },

In return of headerSliverBuilder, we will pass the Sliver App Bar:-

SliverToBoxAdapter(
           child: Padding(
              padding: const EdgeInsets.fromLTRB(25, 10, 25, 25),
              child: Align(
                alignment: Alignment.centerLeft,
                child: Text(
                  "Top News Updates",
                  textAlign: TextAlign.left,
                  style: TextStyle(
                    fontFamily: "Times",
                    fontSize: 34,
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
            ),
          ),

Now we will create categories list. For that, we will create a folder named as model in which we create categories.dart as a file.
Now we will create a class named CategoryModel.In which we pass use variable name and imageUrl and we will create the constructor of the class.

class CategoryModel{
  final name,imageUrl;
  CategoryModel({this.name, this.imageUrl});
}

Then we will create the list of CategoryModel.

List<CategoryModel> categories = [
  CategoryModel(name: "Top stories", imageUrl: "assets/images/categories/topnews.jpg"),
  CategoryModel(name: "India", imageUrl: "assets/images/categories/india.jpg"),
  CategoryModel(name: "World", imageUrl: "assets/images/categories/world.jpg"),
  CategoryModel(name: "Business", imageUrl: "assets/images/categories/business.jpg"),
  CategoryModel(name: "Sports", imageUrl: "assets/images/categories/sports.jpg"),
  CategoryModel(name: "Cricket", imageUrl: "assets/images/categories/cricket.jpg"),
  CategoryModel(name: "Tech", imageUrl: "assets/images/categories/tech.jpg"),
  CategoryModel(name: "Education", imageUrl: "assets/images/categories/education.jpg"),
  CategoryModel(name: "Entertainment", imageUrl: "assets/images/categories/entertainment.jpg"),
  CategoryModel(name: "Music", imageUrl: "assets/images/categories/music.jpg"),
  CategoryModel(name: "Lifestyle", imageUrl: "assets/images/categories/lifestyle.jpg"),
  CategoryModel(name: "Health and Fitness", imageUrl: "assets/images/categories/health_fitness.jpg"),
  CategoryModel(name: "Fashion", imageUrl: "assets/images/categories/fashion_trends.jpg"),
  CategoryModel(name: "Art and Culture", imageUrl: "assets/images/categories/art_culture.jpg"),
  CategoryModel(name: "Travel", imageUrl: "assets/images/categories/travel.jpg"),
  CategoryModel(name: "Books", imageUrl: "assets/images/categories/books.jpg"),
  CategoryModel(name: "Real Estate", imageUrl: "assets/images/categories/realestate.jpg"),
  CategoryModel(name: "Its Viral", imageUrl: "assets/images/categories/its_viral.jpg"),
];

Now go back to homepage.dart.In return of headerSliverBuilder, we will create our TabBar.

Now for TabBar And Nested Scroll View, we will create the controller and integer:-

ScrollController _scrollController;
TabController _tabController;
int currentIndex = 0;

Now we will create the functions named as changePage and _smoothScrollToTop:-

void changePage(int index) {
    setState(() {
      currentIndex = index;
    });
  }

_smoothScrollToTop() {
    _scrollController.animateTo(
      0,
      duration: Duration(microseconds: 300),
      curve: Curves.ease,
    );
  }

Now we will create initState of HomePage()

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    _scrollController = ScrollController();
    _tabController = TabController(length: categories.length, vsync: this);
    _tabController.addListener(_smoothScrollToTop);
 }

In TabController, there is parameter vsync where we use this. Now for this, we have to use SingleTickerProviderStateMixin Here:-

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {

Now we will create the dispose of HomePage()

@override
  void dispose() {
    super.dispose();
    _tabController.dispose();
    _scrollController.dispose();
  }

In TabBar, there is a parameter tabs in which we will pass the List.generate and give the list of CategoryModel as created above.

SliverToBoxAdapter(
            child: Container(
              padding: EdgeInsets.only(left: 25),
              alignment: Alignment.centerLeft,
              child: TabBar(
                  labelPadding: EdgeInsets.only(right: 15),
                  indicatorSize: TabBarIndicatorSize.label,
                  controller: _tabController,
                  isScrollable: true,
                  indicator: UnderlineTabIndicator(),
                  labelColor: Colors.black,
                  labelStyle: TextStyle(
                      fontFamily: "Avenir",
                      fontSize: 19,
                      fontWeight: FontWeight.bold),
                  unselectedLabelColor: Colors.black45,
                  unselectedLabelStyle: TextStyle(
                      fontFamily: "Avenir",
                      fontSize: 18,
                      fontWeight: FontWeight.normal),
                  tabs: List.generate(categories.length,
                      (index) => Text(categories[index].name))),
            ),
          ),

Now in NestedScrollView, there is a parameter body.

But before that, we will create a new folder in lib as reusable in which we will create a new file named custom_cards.dart.

Now in custom_card.dart, we will create a Stateless Widget named HomePageCard.This will be our Reusable Widget.

class HomePageCard extends StatelessWidget {
  final imageUrl, title, subtitle, time;

  const HomePageCard(
      {Key key,
      this.imageUrl = "assets/cardimage.jpg",
      this.title =
          "Watch: Gameplay for the first 13 games optimised for Xbox Series X",
      this.time = "07 May  07:19",
      this.subtitle =
          "Microsoft showcased 13 games, with their gameplay trailers, that will come to Xbox Series X with optimisations."})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.only(top: 15),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Container(
            height: 203,
            width: MediaQuery.of(context).size.width,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10),
              border: Border.all(
                color: Color(0xff707070),
                width: 1,
              ),
              image: DecorationImage(
                  image: AssetImage(imageUrl), fit: BoxFit.fill),
            ),
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    width: MediaQuery.of(context).size.width,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(11),
                      color: Colors.black.withOpacity(0.33),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 10, vertical: 10),
                    child: Center(
                      child: Text(
                        subtitle,
                        style: TextStyle(
                            fontFamily: "Avenir",
                            fontSize: 16,
                            color: Colors.white),
                        maxLines: 3,
                        overflow: TextOverflow.fade,
                      ),
                    ),
                  )
                ],
              ),
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(time,
              style: TextStyle(
                  fontFamily: "Times", fontSize: 13, color: Color(0xff8a8989))),
          SizedBox(
            height: 7,
          ),
          Text(title,
              style: TextStyle(
                  fontFamily: "League",
                  fontSize: 23,
                  fontWeight: FontWeight.bold)),
        ],
      ),
    );
  }
}

Now in the body of NestedScrollView, we will pass List.generate in which we will return the ListView.builder in which we will return HomePageCard and itemCount will be static.

body: Container(
          child: TabBarView(controller: _tabController,children: List.generate(categories.length, (index) {
            return ListView.builder(itemCount: 10,itemBuilder: (context, index) {
              return HomePageCard();
            },
            padding: EdgeInsets.symmetric(horizontal: 25),
            );
          })),
        )

Now last see the final output:-

Github Source Code Link:-

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Branch: Part--3--NestedScrollView

Flutter Drawer with Custom Icon

Maadhav — Sat, 15 Aug 2020 04:06:30 +0000

Hello guys, this blog post is a part of a video series we have started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

In this video, we will have a look at how to create a Drawer with a Custom Icon in Flutter.

So before we customize the icon, lets just build the default Drawer.

Now in our Scafdfold(), there is a parameter named as drawer:

Let's pass the Drawer() widget to this parameter.



drawer: Drawer(
          child: Column(
            children: <Widget>[
              SizedBox(
                height: 30,
              ),
              DrawerHeader(
                child: Container(
                    height: 142,
                    width: MediaQuery.of(context).size.width,
                    child: Image.asset(
                      "assets/images/ten_news.png",
                    )),
                decoration: BoxDecoration(
                  color: Colors.transparent,
                ),
              ),
              SizedBox(
                height: 20,
              ),
              GestureDetector(
                onTap: () {
                  setState(() {
                    currentIndex = 3;
                  });
                  Navigator.of(context).pop();
                },
                child: Text(
                  'Profile',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              GestureDetector(
                onTap: () {},
                child: Text(
                  'Settings',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontSize: 24,
                    fontWeight: FontWeight.w700,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'About',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Text(
                'Log Out',
                style: TextStyle(
                  fontFamily: 'Avenir',
                  fontSize: 24,
                  fontWeight: FontWeight.w700,
                ),
                textAlign: TextAlign.center,
              ),
              SizedBox(
                height: 45,
              ),
              Expanded(
                  child: Align(
                alignment: Alignment.bottomCenter,
                child: Container(
                  height: 65,
                  width: MediaQuery.of(context).size.width,
                  color: Colors.black,
                  child: Center(
                    child: Text(
                      'v1.0.1',
                      style: TextStyle(
                        fontFamily: 'Avenir',
                        fontSize: 20,
                        color: const Color(0xffffffff),
                      ),
                      textAlign: TextAlign.center,
                    ),
                  ),
                ),
              ))
            ],
          ),
        ),

Now above, inside the Drawer() widget, in the child parameter, we have a passed a Column()

This is just used for the sake of inserting multiple widgets in my drawer.

There is also a widget named, DrawerHeader.
This widget is used for displaying any content on top of the whole drawer. This widget comes with a default divider. We have passed our app logo to it.

Now where is the drawer?

In order to see the drawer, we need to also pass the AppBar() to our Home Page's Scaffold().



Scaffold(
   appBar: AppBar()
);

After building the current project we can see the default hamburger Icon in our AppBar. Pressing on it our drawer opens.

How to Exit the Drawer On Press of a Button?

I order to close the drawer manually i.e on the press of a button, we only need to return the Navigator.of(context).pop() to exit the Drawer.

So let's also add a button on our Drawer.



Material(
                borderRadius: BorderRadius.circular(500),
                child: InkWell(
                  borderRadius: BorderRadius.circular(500),
                  splashColor: Colors.black45,
                  onTap: () {
                    Navigator.of(context).pop();
                  },
                  child: CircleAvatar(
                    radius: 20,
                    backgroundColor: Colors.black,
                    child: Icon(Icons.arrow_back, color: Colors.white),
                  ),
                ),
              ),

Now on pressing the button the drawer closes.

How to change the default Hamburger Icon?

This question had arrived in my mind on the first day I had learned to build a Drawer in Flutter.

Now in order to have a custom Icon, lets remove the default one first.



 AppBar(
        automaticallyImplyLeading: false,
),

automaticallyImplyLeading set to false would just remove the default icon.

Now let's pass out Icon to either leading: or title: parameter.



appBar: AppBar(
        automaticallyImplyLeading: false,
        title: Padding(
          padding: EdgeInsets.symmetric(horizontal: 25),
          child: Builder(
            builder: (context) => IconButton(
              icon: SvgPicture.asset(
                "assets/icons/drawer.svg",
                height: 15,
                width: 34,
              ),
              onPressed: () => Scaffold.of(context).openDrawer(),
            ),
          ),
        ),
        backgroundColor: Colors.white,
        elevation: 0,
        centerTitle: false,
        titleSpacing: 0,
      ),

Now in the above code, there are a few importing things:

Builder(): We use a Builder class to pass the context of the Scaffold widget to a particular widget. More Info: https://stackoverflow.com/a/52123080/6484719
Scaffold.of(context).openDrawer(): This is why used the builder widget, to get the current context of the scaffold and then open the drawer.

Finally, our output:

👨‍💻Source Code: https://github.com/Code-Decoders/ten_news_yt/tree/Part-2--Drawer

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

💐Join Our Slack Group: https://bit.ly/JoinSlackCD

✌Subscribe to CodeDecoders: http://bit.ly/CodeDecoders

💮Design Link: https://xd.adobe.com/view/99205dd3-7fe4-44bb-9edd-dd2a75290cbf-cc73/screen/90d0c71c-26b7-44d1-b29d-6578cbd87884

🤝Developed by
Maadhav Sharma:
🌐 https://maadhav.github.io/
🐤 https://twitter.com/maadhav_sharma
📘 https://www.facebook.com/maadhav2001
📷 https://www.instagram.com/maadhav_sharma/
Kunal Jain:
📷 https://www.instagram.com/jainkunal528

Flutter XML Data Parsing

Kunal Jain — Fri, 14 Aug 2020 06:19:04 +0000

Hello guys, this blog post is a part of a Flutter Video Series we are started to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:-

In this blog, we are going to implement the backend of our homepage.

We are going to use XML data and convert into formatted JSON objects to make it easier to use in our app.

What is an RSS Feed?

RSS is a web feed that allows users and applications to access updates to websites in a standardized, computer-readable format.

Accessing an RSS Feed directly into our app is not quite possible.
So, we will parse the RSS/XML data into JSON and display it into the UI portion of our application.

For that, we are going to use the package named xml2json: An XML to JSON conversion package.
https://pub.dev/packages/xml2json.

xml2json

This package allows the parsing of XML strings and the transformation of the resulting parse tree into the following XML JSON conventions:-

The package uses the XML parser to perform the parsing of XML data into a parse tree.

Parker
Badgerfish
Google Data(GData).

The Parker convention is a lossy but lean conversion from XML into JSON, ideal for lightweight XML parsing, where attributes and namespace information is not needed.

Badgerfish and GData both preserve XML information such as attributes and namespaces. These are more suited to heavyweight XML parsing of say RSS feeds where this information may be needed.

Now let's see what our single item in the RSS feed looks like:

As we can see here (line:17) the url is an attribute, hence we need to use either BadgerFish or GData.

In this tutorial, we will be using the GData XML Parser

Add this to your package's pubspec.yaml file:

dependencies:
  xml2json: ^4.3.0

Let's create a new file for handling the parsing process:
rss_to_json.dart

Lets first import the necessary libraries.

convert: To convert a String into a List/Map
xml2json
http: For getting the XML data from the web

import 'dart:convert';
import 'package:xml2json/xml2json.dart';
import 'package:http/http.dart' as http;

Now create a function rssToJson.

Future<List> rssToJson (String category,
    {String baseUrl = "https://www.hindustantimes.com/rss/"}) async{
  var client = new http.Client();
  final myTransformer = Xml2Json();
  return await client.get(baseUrl + category + "/rssfeed.xml").then((response) {
    return response.body;
  }).then((bodyString) {
    myTransformer.parse(bodyString);
    var json = myTransformer.toGData();
    return jsonDecode(json)['rss']['channel']['item'];
  });
}

Here the jsonDecode function is used because the XML parser returns a String. So we just converted the String into a List.

Using `rssToJson` in our homepage

Now there are two ways to fetch Json data:

FutureBuilder()
Future.wait()

We will use Future.wait() in this tutorial.

Future.wait()

Future.wait() waits for multiple futures to complete and collects their results.

Returns a future which will complete once all the provided futures have completed, either with their results or with an error if any of the provided futures fail.

The value of the returned future will be a list of all the values that were produced in the order that the futures are provided by iterating futures.

We will create a Map named as newsData.

Future getData() async {
    return Future.wait([
      rssToJson('topnews'),
      rssToJson('india'),
      rssToJson('world'),
      rssToJson('business'),
      rssToJson('sports'),
      rssToJson('cricket'),
      rssToJson('tech-features'),
      rssToJson('education'),
      rssToJson('entertainment'),
      rssToJson('music'),
      rssToJson('lifestyle'),
      rssToJson('health-fitness'),
      rssToJson('fashion-trends'),
      rssToJson('art-culture'),
      rssToJson('travel'),
      rssToJson('books'),
      rssToJson('realestate'),
      rssToJson('its-viral'),
    ]).then((value){
       newsData['topnews'] = value[0];
    newsData['india'] = value[1];
    newsData['world'] = value[2];
    newsData['business'] = value[3];
    newsData['sports'] = value[4];
    newsData['cricket'] = value[5];
    newsData['tech'] = value[6];
    newsData['education'] = value[7];
    newsData['entertainment'] = value[8];
    newsData['music'] = value[9];
    newsData['lifestyle'] = value[10];
    newsData['health-fitness'] = value[11];
    newsData['fashion-trends'] = value[12];
    newsData['art-culture'] = value[13];
    newsData['travel'] = value[14];
    newsData['books'] = value[15];
    newsData['realestate'] = value[16];
    newsData['its-viral'] = value[17];
       setState(() {
        isLoading = false;
      });
    });
  }

Here value containers all the results as a List.

Now we will call the initState() in the Home() Class and call the getData function.

@override
void initState() {
  super.initState();
  getData();
  }

Now we are getting the XML Data to JSON but we want this data in the homepage.dart. So we will declare the Map<String, List> named newsData in HomePage() and then we will pass it to its constructor

class HomePage extends StatefulWidget {
  final Map<String, List> newsData;

  const HomePage({Key key, this.newsData}) : super(key: key);
  @override
  _HomePageState createState() => _HomePageState();
}

Now we need to set the data into HomePageCard (our reusable Widget).

TabBarView(
  controller: _tabController,
  children: List.generate(
    categories.length,
    (index) {
      var key = categories[index]
        .imageUrl
        .toString()
        .split("/")[3]
        .split(".")[0]
        .replaceAll("_", "-");
      return ListView.builder(
        padding: EdgeInsets.symmetric(horizontal: 25),
        itemBuilder: (context, i) {
          String time = _newsData[key][i]['pubDate']['__cdata'];
          DateTime timeIST = DateTime.parse(time.split(" ")[3] +
            "-" +
            getMonthNumberFromName(month: time.split(" ")[2]) +
            "-" +
            time.split(" ")[1] +
            " " +
            time.split(" ")[4]);
          timeIST = timeIST
            .add(Duration(hours: 5))
            .add(Duration(minutes: 30));
          return HomePageCard(
            title: _newsData[key][i]['title']['__cdata'],
            description: _newsData[key][i]['description']['__cdata'],
            date: timeIST.day.toString() +
                " " +
                getMonthInWordsFromNumber(month: timeIST.month) +
                " " +
                timeIST.toString().split(" ")[1].substring(0, 5),
                imageUrl: _newsData[key][i]['media\$content']['url'],
            );
        },
        itemCount: _newsData[key]?.length ?? 0,
      );
    },
)),

So our backend part is finished So we get the final output.

Github Source Code Link:-

Code-Decoders / ten_news_yt

ten_news

A new Flutter project.

Getting Started

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

View on GitHub

Branch: Part--4--XmlToJson

Bubble Bottom Bar Flutter

Maadhav — Sun, 09 Aug 2020 03:31:14 +0000

Hello guys, this blog post is a part of a video series we are starting to upload on YouTube.
Flutter News App (Frontend to Backend)

Here is the video:

In this blog post, we will have a look at a package that allows us to create a customizable bottom navigation bar.

So now first open our project and create a home.dart file.

Now let's create a StateFull Widget named as Home().

Home would return a Saffold().

In the Scaffold there is a parameter, bottomNavigationBar:
Instead of returning the default BottomNavigationBar widget which is provided by Flutter, we would use a package, bubble_bottom_bar.

Add this to your package's pubspec.yaml file:

...
dependencies:
  bubble_bottom_bar: ^1.2.0

Now in your Dart code, you can use:

import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';

Now in the bottomNavigationBar: pass BubbleBottomBar()

As in our app, we don't need any background shade behind the selected item, we would keep the opacity to 0.

bottomNavigationBar: BubbleBottomBar(
        opacity: 0,
        ...
      ),

Now we also need to declare a variable in which we will be storing the current index.

int currentIndex = 0;
.
.
currentIndex: currentIndex,

Now in the onTap() parameter, we need to pass a function that would update the currentIndex.

  void changePage(int index){
    setState(() {
      currentIndex = index;
    });
  }
.
.
onTap: changePage,

Now the most important thing is the items: parameter.

As seen in the image above the items needs a List of BubbleBottomBarItems.

So, our first item:

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black54,
                height: 21,
              ),
              activeIcon: SvgPicture.asset(
                'assets/icons/home.svg',
                width: 21,
                color: Colors.black,
                height: 21,
              ),
              title: Text("Home")),

Three out of the four items in our app are similar, but the fourth item does not need an activeIcon as its the image of the user. So for the fourth item.

BubbleBottomBarItem(
              backgroundColor: Colors.black,
              icon: Container(
                height: 24,
                width: 24,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  image: DecorationImage(image: AssetImage('assets/user.png')),
                  boxShadow: [
                    BoxShadow(
                        color: Color(0x5c000000),
                        offset: Offset(0, 1),
                        blurRadius: 5)
                  ],
                ),
              ),
              title: Text("Profile")),

Now lets see the final output...

Full Source Code:

DEV Community: CodeDecoders

The Future of Blockchain in Digital Security

Understanding Blockchain's Security Premise

Blockchain in Digital Security: Use Cases

Challenges and Considerations

Looking Ahead

Embracing Blockchain at CodeDecoders

Nested Scroll View Flutter

Code-Decoders / ten_news_yt

ten_news

Getting Started

Flutter Drawer with Custom Icon

Now where is the drawer?

How to Exit the Drawer On Press of a Button?

How to change the default Hamburger Icon?

Code-Decoders / ten_news_yt

ten_news

Getting Started

Flutter XML Data Parsing

What is an RSS Feed?

xml2json

Using rssToJson in our homepage

Future.wait()

Code-Decoders / ten_news_yt

ten_news

Getting Started

Bubble Bottom Bar Flutter

Using `rssToJson` in our homepage