HomeRoots

homeroots

This is the first article, in a new series where I’ll be sharing my journey of building an app for learning a language with Jetpack Compose. I’ll show you my daily progress, how the app evolved over time, why I made certain decisions, and so on. I’ll also share the new things I learn along the way that might be useful to you. When I started programming, one of my first projects was a website that I used to review words I was learning in other languages. Fast-forward a few years, and I need something similar. This time, however, I’ll be building it using Jetpack Compose and aiming to publish it to the Play Store. If you’re a junior engineer, this series will show you my process - how I went from nothing to having an app that’s ready to be published to the Play Store. If you’re a senior engineer, this series will hopefully teach you some new things about Jetpack Compose and might even cause you to rethink the way you solve some problems. Background I’m calling this app Lingua, it’s “language” in Latin. It’s supposed to be a combination of Duolingo and Anki plus some other things I think will be useful. One of my goals for 2023 is to learn Italian, and I also need to spend some of my time actively creating something instead of just passively learning new things. I’ve read a lot about Compose, now it’s time for me to put that knowledge into practice (later I recognized that I actually knew very little about Compose). If I arrive at a version that looks good and I think it makes sense, I’ll publish it to the Play Store. This is the first draft I created in Figma; it is far from the final version but guides me in the right direction. I’m building this app iteratively, so as you will see the first versions of the app will look pretty ugly but that’s okay, the initial goal is to get something that works. Later, I can come back to it and improve the design. I’ll split my updates into days, so you can have a reasonable idea of how long it took to build this, I’m spending about 1hr on this daily. Tools and Libraries To keep track of my tasks, I’m using Notion. For the design, I’m using Figma. I’m using Kotlin and Jetpack Compose. I’ll mention the other libraries as they come into play. Day 1 Below, you can see my first draft of the home screen. I’ll have some kind of progress section that’ll show how much the user learned in a given day, in a given week, and in a given month. I also want to add a strike feature to motivate people to keep learning. Data is pretty valuable to me, so I’ll also add detailed charts about things that might be of value to the user. Instead of just having the usual “Practice” most apps have I also want to build a custom practice that lets you choose what you want to practice. And finally, I want to show the list of courses/decks the user is subscribed to. I’ll call these cards “decks” from now on but the name may change in the future. My screens are divided into route and screen. In the example above, I created and . The route just is what gets added to the navigation graph, the screen, and the actual visual content. HomeRoute HomeScreen Here we have the main for the application. NavHost NavHost(navController = navController, startDestination = Routes.Home.route) {
    composable(Routes.Home) { HomeRoute(navController) }
} And here the that defines the home screen. HomeRoute @Composable
fun HomeRoute(
    navController: NavController,
) {
    HomeScreen(...)
} I’m just using for now but I’ll probably abstract that later. For routes I just defined a sealed class with my routes, for now, this suits my needs but I’ll likely change this too in the future. NavController sealed class Routes(val route: String) {
    object Home : Routes("/")
} Keep in mind that this is my first “big” application with Compose so I’ll certainly make mistakes and learn along the way. I then created the other components but for now, I’m just assigning hard-coded values to them. One thing worth mentioning is how I achieved cropping for flag images. I’m using Coil. I was not able to add cropping directly to the image, so I wrapped it with a and defined a rounded corner for only the bottom end corner because the top start corner is already cropped by the card. Surface I also set the aspect ratio to 16/9 but I’m not 100% happy with the result. Surface(
    shape = RoundedCornerShape(bottomEnd = 8.dp),
) {
    AsyncImage(
        model = model.imageUrl,
        contentDescription = "Icon",
        // TODO: add placeholder
        contentScale = ContentScale.FillBounds,
        modifier = Modifier
            .width(36.dp)
            .aspectRatio(16 / 9f)
    )
} By the end of day 1, I had created the screen you can see below, it’s not functional yet but it’s a good step in the direction I want to go to. Day 2 On day 2, I just built the library screen, it’s pretty simple right now. It lists the available decks. In the future, I’ll add more sorting options to make it easier for the user to find what they want. It also has a button for the user to create a new deck. This is what I had achieved by the end of day 2, nothing special. Just a and a . I actually also created the for this screen so I just need to hook this up to a data source later and the correct data will be listed. LazyColumn FloatingActionButton ViewModel Day 3 On day 3, I started working on the deck creation screen. Basically, I need at least one deck with cards to be able to develop the rest of the application so that’s why I’m going this route first. As you can see below this screen is not as simple as the other ones. First, you can name your Deck, I’ll build this initially. After that you can change it to public/private, I’ll leave this for later. Everything will be public for now. On the top right, you can see a flag, that’s a cool functionality but I won’t be implementing it right now too. In the middle, we have the most important part of this screen, the cards that compose a Deck. For now, there will only be one type of card and it’s just . Input <-> Output For example, the English word Bee is Ape in Italian so it’d be something like Bee <-> Ape. This allows me to do a few things: Show the word “Bee” and the user has to type “Ape”. Show the word “Ape” and the user has to type “Bee”. If there are more words I can show something like “Ape” and the user has to choose a word from a list like (“Apple”, “Bee, “Pie”). This is basically a simple version of Duolingo. Later I’ll be adding support to sound and image but for now, that’s just additional complexity. Finally, we have a button to add new cards and a save button to save everything. I ran into a few problems like how do I pass the deck id to this screen? I’m using the same screen for adding and editing decks so the id had to be an optional parameter. I solved this by creating a new object in and adding the and methods. Routes createRoute parse object EditDeck : Routes("/deck/{id}/edit") {
    fun createRoute(deckId: String?) = "/deck/$deckId/edit"
    fun parse(bundle: Bundle?): String? = bundle?.getString("id")?.takeIf { it != "null" }
} And in my routes, I added the new route. composable(Routes.EditDeck) {
    val deckId = Routes.EditDeck.parse(it.arguments)
    EditDeckRoute(navController = navController, deckId = deckId)
} Then when my screen is created I use a to load the deck in the . LaunchedEffect ViewModel @Composable
fun EditDeckRoute(
    navController: NavController,
    deckId: String?,
    viewModel: EditDeckViewModel = hiltViewModel()
) {
    LaunchedEffect(deckId ?: "none") {
        viewModel.loadDeck(deckId)
    }

    EditDeckScreen(...)
} The code inside will get executed again if the key changes, in this case, if the deck id changes and that’s exactly what I want. LaunchedEffect By the end of day 3, I had built only a small portion of this screen. Day 4 By day 4 I stopped working on the screen to create decks and moved on to the screen to create cards. Decks and cards are the foundation of this app, everything else in the app will revolve around them. For now, I’ll only develop the “Text” type or as I called it earlier Input <-> Output. It’ll contain one field for the input and one field for the output (I need to come up with better names for these things lol). Later I also want to add an “Info” type that works a little bit differently but that’s for later. This screen is pretty similar to the previous one, I have my and EditDeckCardRoute . We also have 2 text inputs and a FAB to save the card. EditDeckCardScreen One difference here is that to create a card I need the deck id and to modify the card I need the card id. To solve this I created 2 routes: and . EditCard AddCard composable(Routes.AddCard) {
    val deckId = Routes.AddCard.parse(it.arguments)
    EditCardRoute(navController, deckId = deckId)
}

composable(Routes.EditCard) {
    val cardId = Routes.EditCard.parse(it.arguments)
    EditCardRoute(navController, cardId = cardId)
} The caller decides which route to call based on what it wants to do but on the implementation side, I chose to use the same route. So when the is created, it either calls a function to create a new card or one to load an existing card. ViewModel fun load(deckId: String?, cardId: String?) {
    when {
        deckId == null && cardId == null -> {
            Logger.e("deckId and cardId are null")
            // navigate up
        }
        deckId != null -> createNewCard(deckId)
        cardId != null -> loadCard(cardId)
    }
} Here’s what this screen looks like by end of day 4. Pretty simple screen but now I can at least create simple cards and add them to a given deck. In this update, we went over the first 4 days of this app. I shared what I’ll be building and why. I also described what I built each day and a little bit about how it was built. I’m enjoying this new series a lot and I’m hoping you’re too. If you liked this update please share it with your friends, and coworkers, …. Stay tuned for the next updates. Cover photo by on . Kelly Sikkema Unsplash Also published . here

How to Build a Language Learning App with Compose – Part 1

Of the Assembling and Opening of the World Conference on the Mind of the Race

How to Design Screens & Widgets In Flutter

Access User Location with Permission Handler in Flutter

, , , and similar items are very essential tools to enhance the user experience on an application regardless of platform. Snack Bars Alert Dialogs ProgressIndicators Intro Welcome to another exciting blog, this is the 8th part of the series . So, far we made , some like the app bar and bottom nav bar, and also implemented a global . In the last two sections, we created and wrote the for registration and sign-in methods to use with the Firebase project. In this section, we'll use flutters' features to give users visual feedback. Flutter App Development Tutorial Splash Screen global widgets theme UI backend You can find the source code . here Show Progress Indicator During Registration/Sign In Head over to the class and make some changes. auth_state_provider Create an enum outside of class, to toggle the Application Process State State. // Outside of any class or function
// Make an enum to togggle progrss indicator
enum ProcessingState {
  done,
  waiting,
} Inside of Provider class let's create a field of type and a  function that switches these values/states. ProcessingState ProcessingState _processingState = ProcessingState.done;
  // getter
  ProcessingState get processingState => _processingState;

  void setPrcState(ProcessingState prcsState) {
    _processingState = prcsState;
    notifyListeners();
  } We'll display the CircularProgressIndicator whenever the application is busy and remove it when done. For instance, after pressing the register/sign-in button we can show the progress indicator in place of the button and then remove it when firebase sends a response. So, let's first start by adding the function inside the register function. We'll make changes inside auth_form_widget files after this. Update Processing State In Register Function // Our Function will take email,password, username and buildcontext
  void register(String email, String password, String username,
      BuildContext context) async {
    // Start loading progress indicator once submit button is hit
    // #1
    setPrcState(ProcessingState.waiting);
    try {
      // Get back usercredential future from createUserWithEmailAndPassword method
      UserCredential userCred = await authInstance
          .createUserWithEmailAndPassword(email: email, password: password);
      // Save username name
      await userCred.user!.updateDisplayName(username);

      // After that access "users" Firestore in firestore and save username, email and userLocation
      await FirebaseFirestore.instance
          .collection('users')
          .doc(userCred.user!.uid)
          .set(
        {
          'username': username,
          'email': email,
          'userLocation': null,
        },
      );
      // if everything goes well user will be registered and logged in
      // now go to the homepage
      GoRouter.of(context).goNamed(APP_PAGE.home.routeName);
    } on FirebaseAuthException catch (e) {
      // In case of error
      // if email already exists
      if (e.code == "email-already-in-use") {
        print("The account with this email already exists.");
      }
      if (e.code == 'weak-password') {
        // If password is too weak
        print("Password is too weak.");
      }

    // #2
      setPrcState(ProcessingState.done);
    } catch (e) {
      // For anything else
      print("Something went wrong please try again.");
      // #3
      setPrcState(ProcessingState.done);
    }
    // notify listeneres
    notifyListeners();
  } In the registration function, we'll start to toggle the ProcessState to (which's by default) right before the Try block. waiting done We'll only switch it back to once the servers send an error response, at the end of the Catch block. We'll not switch it back at the end of the try block because, in case of success, we'll move on to the next page as well as display a Snackbar which we'll implement after this section. done Please make similar changes to the and the functions by yourself. Sign In Log Out Now, we'll need to tell the application, that when the processing state is in , display a progress indicator, and then remove the indicator once the processing state is done. To do so let's head over to . Right after we instantiate an AuthStateProvider, create a new variable of the type ProcessState whose value is equal to that of AuthStateProvider's process state. waiting auth_form_widget Widget build(BuildContext context) {
    final AuthStateProvider authStateProvider =
        Provider.of<AuthStateProvider>(context);

    // make new ProcessState var
    ProcessingState prcState = authStateProvider.processingState; After that, down where we have our elevation button, let's make it a conditionally rendering widget. if (prcState == ProcessingState.waiting) const CircularProgressIndicator(),
  if (prcState == ProcessingState.done)
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  TextButton(
                    onPressed: () {},
                    child: const Text('Cancel'),
                  ),
                  const SizedBox(
                    width: 20,
                  ),
                  ElevatedButton(
                    onPressed: () {
                      // call _submitForm on tap
                      _submitForm(authStateProvider, context);
                    },
                    child: Text(registerAuthMode ? 'Register' : 'Sign In'),
                    style: ButtonStyle(
                      elevation: MaterialStateProperty.all(8.0),
                    ),
                  ),
                ],
              ), The progress indicator will activate and deactivate at the right time. Display Information on Snackbar As mentioned earlier, we'll be using to display information like "Authentication Successful", "Welcome Back", etc. To do so let's again create a simple function on AuthStateProvider class. Snackbar // Right after setPrcState function
 //  create function to handle popups
  SnackBar msgPopUp(msg) {
    return SnackBar(
        content: Text(
      msg,
      textAlign: TextAlign.center,
    ));
  } This function will take a custom message and return a SnackBar to display on the screen. Snackbar works in conjunction with class. So, we'll pass this msgPopUp method in at the end of the block operations, and just before we call GoRouter. ScaffoldMessenger ScaffoldMessenger.of(context) try Inside Registration Function ScaffoldMessenger.of(context)
          .showSnackBar(msgPopUp("The account has been registered."));
// Before GoRouter
GoRouter.of(context).goNamed(APP_PAGE.home.routeName); Inside Login Function ScaffoldMessenger.of(context).showSnackBar(msgPopUp("Welcome Back")); With this when the authentication operation succeeds user will see a snack bar at the bottom of the application. Alert Error on Authentication With Alert Dialog The snack bar is useful because it subtly displays short messages. However, because of its subtlety, it is not very appropriate to be used in case of errors. In such cases, it's better to alert users using a dialog pop-up such as the widget. So, right after the msgPopUp function, let's create another function. AlertDialog // #1
  AlertDialog errorDialog(BuildContext context, String errMsg) {
    return AlertDialog(
      title: Text("Error",
          style: TextStyle(
            //text color will be red
            // #2
            color: Theme.of(context).colorScheme.error,
          )),
      content: Text(errMsg,
          style: TextStyle(
            //text color will be red
             // #3
            color: Theme.of(context).colorScheme.error,
          )),
      actions: [
        TextButton(
          // On button click remove the dialog box
           // #2
          onPressed: () => Navigator.of(context).pop(),
          child: const Text('OK'),
        ),
      ],
    );
  } Our method will take two arguments: an error message and a build context. Our alert box will have texts with the color red. On click, the dialog box will be removed from the screen. The build context is required here to call method. Navigator.pop On both registration and sign-in methods, we are only printing the error messages. Now, let's replace those print statements with errorDialog() and pass the same messages into the function. Inside Register Function's Catch Blocks on FirebaseAuthException catch (e) {
      // In case of error
      // if email already exists
      if (e.code == "email-already-in-use") {
        showDialog(
            context: context,
            builder: (context) => errorDialog(
                context, "The account with this email already exists."));
      }
      if (e.code == 'weak-password') {
        // If password is too weak
        showDialog(
            context: context,
            builder: (context) =>
                errorDialog(context, "Password is too weak."));
      }
      setPrcState(ProcessingState.done);
    } catch (e) {
      // For anything else
      showDialog(
          context: context,
          builder: (context) =>
              errorDialog(context, "Something went wrong please try again."));
      setPrcState(ProcessingState.done);
    } This is what the box will look like. Please, add these alerts to your sign-in method by yourself. Summary A few changes were made in AuthStateProvider and AuthFormWidget classes. We created an Enum to address process states. Progress indicators were implemented based on Processing Status. A simple snack bar function was built to display information for users when authentication succeeds. An error handler was created to display error messages on an alert dialog box. Support Us Was this an informative blog? If so, hit the like button, ask us some questions and share this with your colleagues. The next part is going to be on App Permissions and Google Places API. So, to get notifications. subscribe and follow us This is Nibesh Khadka from Khadka's Coding Lounge. We are a freelancing agency that makes websites and mobile applications. Also published . here

Stories, News & Mentions about HOMEROOTS

Homeroots’s Stories on HackerNoon