In Part I, we created a basic flutter based “Word Collector” app with a single page. In this article, we will create a new page to add a new word and learn about navigation in flutter. To follow along, the starter repo is available here.
Let’s add a new dart file to our lib folder named
add_word.dartand create a stateless widget like so: (we will come to stateful widgets later)
Now, we will replace
Container with a Scaffold to provide a Material design visual structure to this page like so:
Flutter is Google’s UI framework to develop cross-platform natively compiled apps. In this series, we will go through its basics using a “Word Collector” app that you can use to collect new words to revisit them later. Without further ado, let’s get started.
Visit https://flutter.dev/docs/get-started/install, choose your platform and follow the steps.
Also, set up your favourite editor. In this series, we will use VSCode.
Next, go to your terminal and run the following command
flutter create word_collector
This will create a new folder named word_collector containing your app’s starter code.
Open it in your editor, go to
I recently read “The Power Of Habit” where the author Charles Duhigg talks about the formation of habits and the ways to change them.
He bases his prognosis based on a man who had lost a significant portion of his brain due to a virus and could not make new memories as a result. However, he could still learn new habits if the same tasks were repeated over-and-over-again. Charless Duigg uses this example to explain the formation of habits, wherein tasks that need conscious thought in the beginning become almost automatic once a person develops its habit.
He, then, introduces…
I had talked about an end-to-end React App with WebAssembly in my previous article. This one intends to take it a step further by bringing in GPU rendering via OpenGL. So, let’s get started!
This section takes you through the basic webgl setup within our react app. It builds upon the code base from the previous article available here.
We first need to add a canvas to our DOM.
<canvas id=”glCanvas” width=”100px” height=”100px” />
Now, we can create a draw function that extracts the WebGL context from this canvas and clears the canvas to red color.
Hi, I’m Nikhil and I’m a software engineer on Adobe Capture. This article is for anyone who is interested in how Pattern Builder works from a technical standpoint.
Adobe Capture recently added a new feature called Pattern Builder that enables users to grab their vector shapes and arrange them in repeatable grids to make seamless vector patterns.
Traditionally, pattern creation has been a complicated process available only on the desktop and requiring deep knowledge of specific panels and workflows. The Adobe Capture team wanted to reimagine the pattern creation process for touch devices, in a way that is easy and…
Over the past year, I have seen several projects that required the integration of shared libraries written in C++ with React based web apps. However, it’s difficult to find some simple tutorials that explain the integration process end-to-end. So, this is a humble step in that direction. Without further ado, let’s get started!
This section takes you through the steps to setup a basic react app. If you already know how to do that, please feel free to jump to the next section.
As expected, we need to first create a basic npm project like so.
Hi, I’m Nikhil and I’m a software engineer on Adobe Capture. This article is for anyone who is interested in how Adobe Capture works from a technical standpoint.
“Creativity can happen anywhere” is the core mantra behind Adobe Capture — an app that transforms a mobile’s camera feed into design assets that show up magically in Adobe’s desktop apps. One can use it to capture assets such as shapes, colors, patterns, etc. from their surroundings with a few basic clicks. …
Computer Scientist at Adobe | IIT Kanpur