Forem: Preet Parekh

Would you like a tinder for testing your designs? / Does it make any sense??

Preet Parekh — Tue, 23 Apr 2019 19:19:52 +0000

TLDr => While experimenting with some UI, i quickly realised that i had no idea weather people would actually like it or be comfortable with the design / color. Thus a platform where indie devs/ designers can put up their designs and the human can rate the design in binary (like or not like) by swiping Right or Left. So let's discuss it

The Beauty of tinder

Swipe to rate reveals very valuable and rich metrics, as a swipe is impulsive and 'you' don't have enough time to see weather the border-radius is 8px or not◑﹏◐.

Important Features

Left swipe to dislike.
Right swipe to like.
Swipe up for the next post.
Once you've made a decision you can't edit it.
Hold down on a post to reveal further actions such as sharing, etc,

Maintaining User Retention

User onboarding show not be much of a pain as many people are interested in rating design and judging ideas.
A idea that ought to increase the retention and hipness of the service would be to pay the person for swiping (i.e. 100₹ for every 100 ratings/ swipes). Physically I don't know how this would affect the quality of the ratings, but I believe a solid model could be built.

value

As many of you would know most design that we build for our products / experiments are based on our own experiences and hunches. This service would connect you with the people, a simple tool to brainstorm with the masses.

Talking Money

This service will require some cash for sure

Two ideas in my mind

1. Showing Ad's

Pretty self explanatory, but can lead to decreased user retention and possibly harm the app and it's purpose. Also I don't like ads.

2. The other idea involves charging the person posting for money

This does make more sense but again if we're being realistic who's gonna pay.

So this is what's on my mind. Let's talk. Maybe even build it together

I'll be down below.

Building Instagram With Flutter - UI Scaffold

Preet Parekh — Sat, 26 Jan 2019 14:09:17 +0000

HomePage

Hey how are you??
In this post I will be building out the home page.
The Home Page will be a CustomScrollView.
Why?? you ask? A Custom Scroll View allows you to use Slivers which essentially is a section of a viewport, meaning you can have a scrollable page consisting of different widgets.

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[],
    );
  }
}

Tip :- To use a Normal Widget in slivers just use a SliverToBoxAdapter().

App Bar

The App bar is part of the HomePart , because it is different for every page (Profile, search, etc.).
We use SliverAppBar provided natively by Flutter and can be as a Sliver.
The App bar is set as pinned, so that it remains static even while scrolling up/down, but this can be changed for some interesting UI/UX.

SliverAppBar(
          pinned: true,
          backgroundColor: new Color(0xfff8faf8),
          elevation: 0.0,
          centerTitle: true,
          title: SizedBox(
            height: 35.0,
            child: Image.asset("assets/images/insta_logo.png"),
          ),
          leading: IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.camera_alt,
              color: Colors.black,
            ),
          ),
        ),

Link to instagram Logo

Bottom Bar

The Bottom App bar is part of the main.dart file under the scaffold widget.
This is because the bottom bar should be constant across all the pages / routes.And will act like a navigation Bar.
The new post button is a FAB with a diamond shape and Docked with the Bottom App Bar.

floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
        floatingActionButton: FloatingActionButton(
          backgroundColor: Colors.black,
          child: new Icon(Icons.add),
          onPressed: () {},
          shape: new BeveledRectangleBorder(
              borderRadius: new BorderRadius.circular(50.0)),
        ),
bottomNavigationBar: BottomAppBar(
          notchMargin: 6.0,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.home),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.search),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.favorite),
                onPressed: () {},
              ),
              IconButton(
                icon: Icon(Icons.account_box),
                onPressed: () {},
              )
            ],
          ),
        ),

Post

A Instagram POST consists of multiple sections

This is how instagram looks and what we will be trying to replicate

The post Widget will contain a column with three childrens.

The first children contain a Row to accomodate a profile image, poster name, and a menu button.
The second child will be the main image which can be of any size.
The third child will be be a set of actions such as a like button, comment, send to, and a bookmark button.

You will have to add font_awesome_flutter and include it in the file

class Post extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
          child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Container(
                      height: 40.0,
                      width: 40.0,
                      decoration: BoxDecoration(
                          shape: BoxShape.circle,
                          image: DecorationImage(
                              fit: BoxFit.fill,
                              image: new NetworkImage(
                                  "https://pbs.twimg.com/profile_images/877903823133704194/Mqp1PXU8_400x400.jpg"))),
                    ),
                    SizedBox(width: 10.0),
                    Text(
                      "The Verge",
                      style: TextStyle(fontWeight: FontWeight.bold),
                    )
                  ],
                ),
                IconButton(
                  icon: Icon(Icons.more_vert),
                  onPressed: () {},
                )
              ]),
        ),
        Container(
          child: Image.network(
            "https://scontent-bom1-1.cdninstagram.com/vp/bbe7af06973ff08e40c46e78b6dbae1b/5CD2BC37/t51.2885-15/e35/49480120_356125811610205_2312703144893486280_n.jpg?_nc_ht=scontent-bom1-1.cdninstagram.com",
            fit: BoxFit.cover,
          ),
        ),
        Padding(
          padding: EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  IconButton(
                    icon: Icon(Icons.favorite_border),
                  ),
                  SizedBox(width: 16.0),
                  Icon(FontAwesomeIcons.comment),
                  SizedBox(width: 16.0),
                  Icon(FontAwesomeIcons.paperPlane)
                ],
              ),
              Icon(FontAwesomeIcons.bookmark)
            ],
          ),
        ),
      ],
    );
  }
}

Conclusion

I have built a UI which is similar to Instagram and really enjoy the developer experience and UI first approach the Flutter Provides.

Got any questions ask then Below??!

Building Instagram With Flutter

Preet Parekh — Mon, 14 Jan 2019 09:50:16 +0000

The Idea

In this MultiPart Series I wish to built a complete, Full Featured, Fast, Open Source Instagram Like App.

The Basic Idea is to have a Flutter app, powered with a Firebase Backend with support for Adding / Liking / Deleting Images, A Stories Like Thing, Sexy UI and Cool Transitions, Full CI/CD support, Testing, etc.

The purpose of this exercise is to learn building large scale complex Applications, with high scalability, efficiency, and upgradeability., while also giving back to the community.

Let's Initialize the flutter app

    flutter create instagram
    cd instagram
    flutter run

You Should have a flutter app running on your phone, running the flutter demo app.

This might not look like much but trust me we're gonna build an amazing App trust me 😉.

preetjdp / instagram

backdrop

A new Flutter project.

Getting Started

For help getting started with Flutter, view our online documentation.

View on GitHub