Learn KODULAR with Real Code Examples

1. Drag a Text Box component onto the screen for 'New Todo'.
2. Drag a Button labeled 'Add' -> logic: Append input value to list variable 'todos'.
3. Drag a ListView component bound to 'todos' to display items.
4. Add blocks to clear input after adding a task.
5. Test live on device or emulator; export as Android APK or PWA.

Demonstrates a simple Kodular app with a Todo list, adding tasks, and displaying them using drag-and-drop components and block-based logic.

1. Create variable 'count', initialize 0.
2. Add Buttons '+', '-', 'Reset'.
3. Configure '+': Set 'count' = count + 1.
4. Configure '-': Set 'count' = count - 1.
5. Configure 'Reset': Set 'count' = 0.
6. Bind a Label to 'count' to display the value.

A simple counter app using variables and block logic for incrementing, decrementing, and resetting.

1. Add Text Boxes: 'Username' and 'Password'.
2. Add Button 'Login'.
3. Blocks: If both fields non-empty -> Navigate to 'Home' screen.
    Else -> Show Alert 'Invalid credentials'.

Shows a login form with validation using blocks and conditional navigation.

1. Create variable 'notes' (list).
2. Add Text Box for note entry.
3. Add Button 'Save Note' -> Append input to 'notes'.
4. Bind ListView to 'notes'.
5. Add optional logic to save locally or reset input.

Stores and displays notes using list variables and block logic.

1. Add Label bound to variable 'seconds' (init 0).
2. Add Buttons: 'Start', 'Stop', 'Reset'.
3. 'Start' -> Timer every 1 sec -> Increment 'seconds'.
4. 'Stop' -> Stop Timer.
5. 'Reset' -> Set 'seconds' = 0.

Implements a stopwatch using Timer component and variable increments.

1. Create variable 'isDark' (boolean).
2. Add Switch bound to 'isDark'.
3. Blocks: Change background/text colors based on 'isDark'.
4. Add Label: Show 'Light Mode' or 'Dark Mode'.
5. Preview theme switching.

Switches between light and dark themes using a switch and conditional blocks.

1. Create variables: 'num1', 'num2', 'result'.
2. Add two Text Boxes for numbers.
3. Add Buttons '+', '-', '*', '/'.
4. Blocks: On button press -> Set 'result' = formula(num1 op num2).
5. Bind Label to 'result'.

A simple four-function calculator using number inputs and formula blocks.

1. Add Text Box for city name input.
2. Create Web Component -> connect to weather API.
3. Bind API response to variable 'weatherData'.
4. Add Button 'Fetch' -> call API.
5. Bind Labels/ListView to display temperature and conditions.

Fetches weather info from an API and displays it using labels and list components.

1. Create variable 'images' (list of URLs).
2. Add ListView bound to 'images'.
3. Inside ListView -> Add Image component bound to current item's URL.
4. Add Button 'Add Image' -> Append new URL to 'images'.
5. Preview images on device.

Displays images using list variables and ListView/Image components.

1. Add Button 'Scan QR'.
2. Add Barcode Scanner component -> connect to button.
3. Create variable 'qrResult'.
4. Store scanner output -> 'qrResult'.
5. Bind Label to 'qrResult' to show scanned data.

Scans QR codes and displays the result using device scanner component and logic blocks.