Hacktoberfest Progress Week 3

Hacktoberfest Progress

Welcome everyone to my second post of hactoberfest. This week I started working on more projects, looked for some projects to work on. I worked on a new language dart, contributed to something different this time. I worked on a flutter which is an open-source UI software development kit created by google.

Finding Projects

I searched GitHub to look for projects and found these which took my interest: fludget, web3community, mdnc. You all should check out these projects.

Issues

Issue# 1. This week I worked on Fludget: This project is developed to learn Flutter using Flutter. Different widgets used in Flutter can be viewed in this app along with their implementation, description and code. I believe submitted issues are easy to work on and save a lot of time.

Issues related about:

The issue was to add a feature: Image Filtered Widget to the Widget Catalog, submitted by the developer who assigned it to me.
Here's the API for widget class available on the official site by flutter developer: ImageFiltered-class

Preparation

The preparation to work on this project was to install Flutter on my mac. I took it by surprise that it went very easy. The documentation provided by this website was good.
Installation Flutter

Learning

1. How to develop an app using Flutter in Mac OS.
2. How to use Widget Catalog in Flutter.
3. How to blur, rotate and skew the image using ImageFiltered.
4. How to work with git with multiple commits.

After:

Researches:

Imagefiltered widget

Interactions:

I had good interactions with developers on Github. I take challenges and ask developers to review the pull request before merging to the master branch. This week the developer wanted me to do a couple of things more to similar pull requests.

Outcome:

This week I worked on using flutter to include image filters widgets like blur, matrix to showcase transform, enlarge, shrink and other features which can implemented using this widget. All in all, it is good to learn new UI software development kit.

Dart Implementation in Flutter

import 'dart:ui';
import 'dart:typed_data';

Classes Implementation In Flutter

class ImageFilterImplementation extends StatefulWidget {
  const ImageFilterImplementation({Key? key}) : super(key: key);

  @override
  State<ImageFilterImplementation> createState() => _ImageFilterImplementationState();
}

class _ImageFilterImplementationState extends State<ImageFilterImplementation> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(10.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceAround,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  "Blur Image filtered demo",
                  style: TextStyle(
                  fontWeight: FontWeight.bold,
                  ),
                ),
                ImageFiltered(
                  imageFilter: ImageFilter.blur(sigmaX: 4),
                  child: FlutterLogo(
                    size: 220,
                  ),
                ),
                SizedBox(height: 20.0),
                Text(
                  "Floating Image filtered demo:",
                  style: TextStyle(
                  fontWeight: FontWeight.bold,
                  ),
                ),
                ImageFiltered(
                  imageFilter: ImageFilter.matrix(
                  Float64List.fromList([
                    1,0,0,0,
                    0,1,0,0,
                    0,1,1,1,
                    1,0,0,1
                    ]),
                  ),
                  child: FlutterLogo(
                    size: 220,
                  ),
                ),
                SizedBox(height: 20.0),
                Text(
                  "Rotation Image filtered demo:",
                  style: TextStyle(
                  fontWeight: FontWeight.bold,
                  ),
                ),
                ImageFiltered(
                  imageFilter: ImageFilter.matrix(
                    Matrix4.rotationZ(0.10).storage,
                  ),
                  child: FlutterLogo(
                    size: 220,
                  ),
                ),
              ],
            ),
          ),
        )
    );
  }

Link to Pull Requests:

PR