Reddit Verification Tool

What I am going to do in this project is to build a verification tool for an R4R subreddit.

Purpose

The aim is to closely tie one account to one person in an R4R, and give confidence to people who see their posts.

Vision

To push forward good community members who are looking to meet like-minded people.

---

26/07/2022

https://stackoverflow.com/questions/54951254/implementing-mobile-step-progress-bar-from-the-material-guidelines

Pages:

• Username field page [Step 1 of 4]

• Verification type page [Step 2 of 4]

• Photo verification [Step 3 of 4]

• Voice verification [Step 3 of 4]

• Description [Step 4 of 4]

• Completed

• Landing Page

Things to implement:

• Firebase Firestore

• Image/audio/file upload (take photo?)

• Record audio

• 3 random words generator

https://api.flutter.dev/flutter/widgets/PageView-class.html

Full page of UI elements in a viewport.

Create pages and a controller and you can swipe through the pages as a full-screen UI.

To move to a page on a button click, pass the PageController to the Widget that is the page and call PageController.animateToPage() under the onPressed parameter.

ElevatedButton(
            onPressed: () {
              widget.controller.animateToPage(1,
                  duration: Duration(milliseconds: 200),
                  curve: Curves.easeInOutQuad);
            },
            child: Text("Next"),
          )

---

27/07/2022

Goals

• Complete navigation

• Fields

Text form field to enter text. To style, use the Decoration parameter with the InputDecoration widget.

Autofocus to jump to the field and prefixText to have a string before the text is entered.

TextFormField(
            // autofocus: true,
            decoration: InputDecoration(
              prefixText: "u/",
              labelText: "Reddit username",
              helperText: "enter username exactly",
              border: OutlineInputBorder(),
            ),
          ),

For a centered column, i.e. Column widget as a child to Center widget, set the Column main axis to min.

---

28/07/2022

Goals

• Finish styling Verification Selection screen

• Data model

To center both horizontally and vertically in a Listview, wrap in Center widget and set shrinkWrap: true in the listview parameters.

---

29/07/2022

Goals

• Style Add Photo Screen

• Understand Layout a little bit better

Start with the overall layout of the page, using Expanded and Container. These can be bounded, i.e. of a set height and width, or unbounded, i.e. to fill the space available.

---

30/07/2022

Goals

• Create the Add Photo Screen (UI Only)

• Get the Layout right in the first few attempts

Creating a Padding, with a child of Column will give the screen, then creating Expanded widget within and with the parameter flex to size in comparison to each other.

Padding(
      padding: EdgeInsets.all(45.0),
      child: Column(
        children: [
          // Top element
          Expanded(
            flex: 1,
            child: Container(color: Colors.amber),
          ),
          // Middle element  twice the  size of top and bottom
          Expanded(
            flex: 2,
            child: Container(color: Colors.deepPurple),
          ),
          // Bottom element
          Expanded(
            flex: 2,
            child: Container(color: Colors.deepPurple),
          ),
         ),
        );

Using Expanded is useful for layout when things need to be in proportion.

Image.network(url) is for images on the internet.

A button can be set to disabled by putting null in the onPressed parameter. A Ternary Operator can be used to make a button available or not based on a state of type boolean.

ElevatedButton(
  onPressed: uploaded
    ? () {
    widget.controller.animateToPage(6,
    duration: Duration(milliseconds: 200),
    curve: Curves.easeInOutQuad);
    } : null,
   child: Text("Next"),

---

02/08/2022

To change an icon for an IconButton on press, use a Ternary Operator for the icon paramter conditionally on a boolean state.

 IconButton(
          icon: toggle
              ? Icon(Icons.favorite_border)
              : Icon(
                  Icons.favorite,
                ),
          onPressed: () {
            setState(() {
              // Here we changing the icon.
              toggle = !toggle;
            });
          }),

---

03/08/2022 - nothing so … 04/08/2022

Goals

• Image capture/upload

• Audio record

• Cloud storage of files

• Data Model

  • Reddit username

  • verification file

  • description

  • verified, default=false