Forem: fathidevs

Days 4-7: Busy days

fathidevs — Sun, 24 Apr 2022 20:50:16 +0000

The past few days I was barely on my laptop, and when I am, I write 2 lines of code that is work related.

But I was able to prepare the majority of the necessary stuff to get me started to build with appwrite. installed Docker desktop and appwrite backend server, and explored some functions, next, I will make a separate Flutter app as backend playground.

The past busy days didn't keep me away from my phone (of course), so I had the chance to explore appwrite docs for Flutter, and I'm surprised by how easy to interact with the backend. after the hackathon, I will try appwrite for Android.

Day 3: Still UI/bottom navigation bar (custom)

fathidevs — Tue, 19 Apr 2022 19:10:17 +0000

I think I moved the biggest rock off the way by finishing up the custom bottom navigation bar, I could make the bottom navigation bar as buttons inside container that takes the screen width and the height of BottomNavigationBar() //kBottomNavigationBarHeight But because I'm fairly new to Flutter and there are a lot of stuff to learn, I thought to make a widget (and possibly a flutter package) and use it exactly like I'm using the built-in Flutter BottomNavigationBar widget or external package.

The final result isn't as Flutter's BottomNavigationBar but it does the exact same thing, the only difference is the code implementation and how events are handled. Also before I forget to mention, I made changes in the CustomButton widget from Day 2

The funny thing is, the CustomBottomNavigationBar does not interact with clicks, it is basically a container with CustomButton widgets, what interact with clicks is the CustomButton itself, so in CustomBottomNavigationBar(childeren: _items) each item has its own onPressed() and because it is VoidCallback it does not return any args like in the normal BottomNavigatoinBar the onPressed(index) => ... returns an integer indicating the index of the current bottom navigation bar, in my BottomNavigatoinBar, this is how I managed to get the index:

onPressed: () {
          setState(() {
            _currentIndex = 1; // setting the index manually
          // setting the buttons bool values to appear as one 
         // button is pushed down at a time

            tapStatus[_currentIndex] = true; // the clicked button

            tapStatus[0] = false; 
            tapStatus[2] = false;
            _screenController.jumpToPage(_currentIndex);
          });
        },

I did not want to waste more time on making the CustomBottomNavigationBar receives click event, I might apply changes some other time

check out my custom bottom navigation bar

Day 2: crafting HAPOC UI

fathidevs — Mon, 18 Apr 2022 20:52:27 +0000

I thought I will finish the UI fast since it's not a very complicated interface, but I had to learn how to make custom 3D buttons in Flutter. I didn't think about how the button should look like when doing the UX, it was a design decision when I finished off the main screen.

it's a game right? it has to offer some interactive experience. so I looked up few tutorials and source codes on Github, here are the two Githubs that actually helped me:

Clicky button very intense 3D shape and satisfying to click on and watch it bounce. Preview
Button3D very simple and straightforward, unlike Clicky Button it has two shapes and gives the illusion of a 3D button viewed from angel between top and front. Preview The button I created is inspired by both source codes above, it is like Clicky in animation and Button3D in design.

In Button3D the design is two widget above each other, the top is triggered when pressed and the bottom (I called it _body()) is static, both are wrapped in Stack() => GestureDetector() the GestureDetector() job is to toggle between true and false when tap detected, and because the top widget returns AnimatedPosition() I can play with the Duration() to achieve smooth animation.

here is the top widget, the one that detects taps:

Widget _topFace() {
    return AnimatedPadding(
      duration: Duration(milliseconds:600),
      curve: Curves.ease,
      padding: EdgeInsets.only(bottom: isTapped ? 0.0 : 20.0),
      child: Container(
        decoration: BoxDecoration(
            color: Colors.red,
            borderRadius: BorderRadius.circular(5.0)),
        child: Padding(
          padding: EdgeInsets.symmetric(
              vertical: 18.0, horizontal: 18.0),
          child: LimitedBox(
            maxWidth: MediaQuery.maybeOf(context)!.size.width *.9,
            child: Text(
              "Click me",
              style: TextStyle(color: Colors.white),
            ),
          ),
        ),
      ),
    );
  }

The important variable in above widget is isTapped the key to the juicey movements lol, it is false by default and changes to true only when onTapDown // finger is not lifted or moved from its position in GestureDetector() is triggered, then setState(() => istapped = false); when onTapup // finger lifted from the screen and onTapCanceled // finger slid from its position, also the VoidCallback onPressed() is detected when onTapUp is triggered, because user lift the finger after "press" action is done as a complete action and expect feedback.

here is the methods for detecting gestures:

void _tapDown(TapDownDetails details) {
    setState(() {
      isTapped = true;
    });
  }

  void _tapCancel() {
    setState(() {
      isTapped = false;
    });
  }

  void _tapUp(TapUpDetails details) {
    setState(() {
      isTapped = false;
    });
    widget.onPressed();
  }

the static Widget _body(){...} that doesn't animate or interact with click event, or any event:

Widget _body() {
    return Container(
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(5.0),
      ),
      child: Padding(
        padding: EdgeInsets.symmetric(
            vertical: 18.0, horizontal: 18.0 - .1),
        child: LimitedBox(
          maxWidth: MediaQuery.maybeOf(context)!.size.width * .9,
          child: Visibility(
            visible: false,
            maintainAnimation: true,
            maintainSize: true,
            maintainState: true,
            child: Text(
              "Click Me",
              style: TextStyle(color: Colors.blue),
            ),
          ),
        ),
      ),
    );
  }

you can see useless Text() widget in the static Widget _body(){...} with visibility: false, it's because I set the Widget _topFace(){...} to wrap the Text() and I could not achieve that without setting copy of the Text() in the Widget _body(){...} otherwise it will wrap on itself and be smaller than Widget _topFace(){...}

check the complete code

Day 1: Setting up for participation in the Appwrite hackathon

fathidevs — Sat, 16 Apr 2022 13:10:27 +0000

I'm probably too late to the party lol.

I just finished up UX design of the app, and might not do too much in UI design (maybe just colors) to save time.

The app idea is a multiplayer game where players compete to form a name off a letter. I want to reveal the details about the game but I'm not sure if it's a good, please let me know if it's okay to reveal, I will do that on Day2 update.

What is in Appwrite that I'm going to utilize?

Obviously Database is the most important thing for the app to perform CRUD operation, there will be no "Read" operation though, because, coming from Firebase I think it is costly (this is my thought before reading the docs).

The initial idea was to allow players to create "Room" then the created room will be available for every players in the app, but to cut down the cost I thought to allow players make "Private Room" then invite friends. I think there will be "Read" operation after all! cause "Friends List" lol :).

other stuff to utilize is Authentication at least for the sake of creating the "Rooms" under unique IDs (users Token, ID, etc...) and prevent crashes and awkward moments.

probably Storage to allow users upload their photo to replace an avatar. The game has flashing card with design, so I might utilize the storage even more by allowing users upload and use their custom design or a store for card design, it will be great if I'm able to do all that before the deadline, if not, maybe when I'm going to scale the app further.

And other things that I'm going to find out that I need when I actually start to develop will be included in the coming series

Tomorrow is Sunday! so I will try to finish the UI in Flutter to be able to focus on the backend throughout the week while my 9 - 5 job.

although I'm native Android dev, I chose to make it in Flutter because I'm fairly new to Flutter, and at the time of this post, I'm using Flutter for 2 months and 16 days, because my job requires it. Also it is a good opportunity to sharpen my newborn skill, and to explore other backend services (I'm familiar with Firebase and phpMyAdmin).

26 days left, maybe I'm not too late to the party