I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

SUBSCRIBE NOW

Keep up the good work with the newsletter 💪 I really enjoy it

SUBSCRIBE NOW

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

SUBSCRIBE NOW

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

SUBSCRIBE NOW

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

SUBSCRIBE NOW

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

SUBSCRIBE NOW

Thanks for taking the time and energy to do it so well

JetpackCompose.app's Newsletter

I always learn something just by skimming it that makes me want to bookmark the issue now and dig deeper later

JetpackCompose.app's Newsletter

Keep up the good work with the newsletter 💪 I really enjoy it

JetpackCompose.app's Newsletter

Dispatch is a must read for Android devs today and my go-to for keeping up with all things Jetpack Compose

JetpackCompose.app's Newsletter

Dispatch has been my go-to resource as it's packed with useful information while being fun at the same time

JetpackCompose.app's Newsletter

The content is light, fun, and still useful. I especially appreciate the small tips that are in each issue

JetpackCompose.app's Newsletter

I truly love this newsletter ❤️‍🔥 Spot on content and I know there's a lot of effort that goes behind it

JetpackCompose.app's Newsletter

Thanks for taking the time and energy to do it so well

Compare Declarative Frameworks

Choose up-to 3 frameworks and learn how they compare to each other.

Jetpack Compose

SwiftUI

Flutter

React

Vue.js

Concept

Vue.js

SwiftUI

Flutter

Creating a new Component

Components are the reusable building blocks of your application. They are the most basic UI elements and can be used to build more complex components.

Vue.js

javascript

<template>
  <div>{{ displayString }}</div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  displayString: String
});
</script>

SwiftUI

swift

struct MyComponent: View {
    var displayString: String
    var body: some View {
        Text(displayString)
    }
}

Flutter

dart

class MyComponent extends StatelessWidget {
  final String displayString;

  MyComponent({required this.displayString});

  @override
  Widget build(BuildContext context) {
    return Text(displayString);
  }
}

Conditional Rendering

Conditional rendering is a technique used to display different UI components or content based on certain conditions, such as the value of a variable or the outcome of a boolean expression.

Vue.js

javascript

<template>
  <p v-if="condition">Condition is true</p>
  <p v-else>Condition is false</p>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  condition: Boolean
});
</script>

SwiftUI

swift

struct ConditionalComponent: View {
    let condition: Bool

    var body: some View {
        Group {
            if condition {
                Text("Condition is true")
            } else {
                Text("Condition is false")
            }
        }
    }
}

// Usage
ConditionalComponent(condition: true)

Flutter

dart

class ConditionalComponent extends StatelessWidget {
  final bool condition;

  ConditionalComponent({required this.condition});

  @override
  Widget build(BuildContext context) {
    if(condition) {
      return Text("Condition is true");
    } else {
      return Text("Condition is false");
    }
  }
}

// Usage
ConditionalComponent(condition: true)

Prop/Parameter Drilling

Prop/Parameter drilling is a technique where data is passed through multiple layers of components in the component hierarchy, often from a parent component to a deeply nested child component, via props or parameters.

Vue.js

javascript

<template>
  <intermediate-component :data="data" />
</template>

<script setup>
import { defineProps } from 'vue';
import IntermediateComponent from './IntermediateComponent.vue';

const props = defineProps({
  data: String
});
</script>

SwiftUI

swift

struct Parent: View {
    let data: String

    var body: some View {
        IntermediateComponent(data: data)
    }
}

struct IntermediateComponent: View {
    let data: String

    var body: some View {
        ChildComponent(data: data)
    }
}

struct ChildComponent: View {
    let data: String

    var body: some View {
        Text("Received data: \(data)")
    }
}

// Usage
Parent(data: "Some data")

Flutter

dart

class Parent extends StatelessWidget {
  final String data;

  Parent({required this.data});

  @override
  Widget build(BuildContext context) {
    return IntermediateComponent(data: data);
  }
}

class IntermediateComponent extends StatelessWidget {
  final String data;

  IntermediateComponent({required this.data});

  @override
  Widget build(BuildContext context) {
    return ChildComponent(data: data);
  }
}

class ChildComponent extends StatelessWidget {
  final String data;

  ChildComponent({required this.data});

  @override
  Widget build(BuildContext context) {
    return Text("Received data: $data");
  }
}

// Usage
Parent(data: "Some data")

Responding to events

Responding to events involves handling user interactions, such as button clicks or text input changes, and updating the component's state or triggering side effects accordingly.

Vue.js

javascript

<template>
  <button @click="setClicked">
    {{ clicked ? "Button clicked" : "Click me" }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const clicked = ref(false);

function setClicked() {
  clicked.value = true;
}
</script>

SwiftUI

swift

struct ClickableComponent: View {
    @State private var clicked = false

    var body: some View {
        Button(action: {
            clicked = true
        }) {
            Text(clicked ? "Button clicked" : "Click me")
        }
    }
}

Flutter

dart

class ClickableComponent extends StatefulWidget {
  @override
  _ClickableComponentState createState() => _ClickableComponentState();
}

class _ClickableComponentState extends State<ClickableComponent> {
  bool clicked = false;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () => setState(() => clicked = true),
      child: Text(clicked ? "Button clicked" : "Click me"),
    );
  }
}

Handing user input

Handling user input involves capturing and processing user interactions with input fields, such as text fields, sliders, or checkboxes, and updating the component's state or triggering side effects based on the input.

Vue.js

javascript

<template>
  <input
    type="text"
    v-model="text"
    placeholder="Enter text"
  />
</template>

<script setup>
import { ref } from 'vue';

const text = ref('');
</script>

SwiftUI

swift

struct TextInputComponent: View {
    @State private var text = ""

    var body: some View {
        TextField("Enter text", text: $text)
    }
}

Flutter

dart

class TextInputComponent extends StatefulWidget {
  const TextInputComponent({super.key});

  @override
  State<TextInputComponent> createState() => _TextInputComponentState();
}

class _TextInputComponentState extends State<TextInputComponent> {
  late final _controller = TextEditingController(text: "");

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: _controller,
      decoration: const InputDecoration(labelText: "Enter text"),
    );
  }
}

Previewing a Component

Creating a preview of a component involves displaying a visual representation of the component in the development environment to help with the design and layout process.

Vue.js

Vue.js doesn't have a built-in preview feature. However, you can use a tool like Storybook to create previews for your components in a separate development environment.

SwiftUI

swift

struct ExampleComponent: View {
    var body: some View {
        Text("Hello, World!")
    }
}

struct ExampleComponent_Previews: PreviewProvider {
    static var previews: some View {
        ExampleComponent()
    }
}

Flutter

Flutter doesn't have a built-in preview feature. You can, however, create a separate app or run your app in an emulator or on a device to view your components. Additionally, you can use the Flutter Studio web-based tool to create and preview Flutter widgets in a browser.

Lists & Looping

Lists and looping involve rendering a dynamic number of components based on the length of a list or array, iterating over the list, and generating a UI component for each item.

Vue.js

javascript

<template>
  <ul>
    <li v-for="item in items" :key="item">
      {{ item }}
    </li>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: Array
});
</script>

<!-- Usage -->
<list-component :items="['Item 1', 'Item 2', 'Item 3']"></list-component>

SwiftUI

swift

struct ListComponent: View {
    let items: [String]

    var body: some View {
        List(items, id: \.self) { item in
            Text(item)
        }
    }
}

// Usage
let items = ["Item 1", "Item 2", "Item 3"]
ListComponent(items: items)

Flutter

dart

class ListComponent extends StatelessWidget {
  final List<String> items;

  ListComponent({required this.items});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        return ListTile(title: Text(items[index]));
      },
    );
  }
}

// Usage
final items = ["Item 1", "Item 2", "Item 3"];
ListComponent(items: items)

List item keys

List Item Keys are unique identifiers assigned to each list item in declarative UI frameworks to help manage and update list elements efficiently. Using List Item Keys enables the framework to optimize the rendering process, minimizing unnecessary updates and improving overall performance.

Vue.js

javascript

<template>
  <ul>
    <li v-for="person in items" :key="person.id">
      Name: {{ person.name }}, Age: {{ person.age }}
    </li>
  </ul>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps({
  items: Array
});
</script>

<!-- Usage -->
<item-keys-example
  :items="[
    { name: 'John', age: 30, id: '1' },
    { name: 'Jane', age: 28, id: '2' },
    { name: 'Bob', age: 25, id: '3' }
  ]"
></item-keys-example>

SwiftUI

swift

struct Person: Identifiable {
    let name: String
    let age: Int
    let id: String
}

struct ItemKeysExample: View {
    let items: [Person]

    var body: some View {
        List(items) { person in
            Text("Name: \(person.name), Age: \(person.age)")
        }
    }
}

// Usage
ItemKeysExample(items: [Person(name: "John", age: 30, id: "1"), Person(name: "Jane", age: 28, id: "2"), Person(name: "Bob", age: 25, id: "3")])

Flutter

dart

class Person {
  final String name;
  final int age;
  final String id;

  Person({required this.name, required this.age, required this.id});
}

class ItemKeysExample extends StatelessWidget {
  final List<Person> items;

  ItemKeysExample({required this.items});

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: items.length,
      itemBuilder: (context, index) {
        final person = items[index];
        return ListTile(
          key: Key(person.id),
          title: Text('Name: ${person.name}, Age: ${person.age}'),
        );
      },
    );
  }
}

// Usage
ItemKeysExample(items: [Person(name: 'John', age: 30, id: '1'), Person(name: 'Jane', age: 28, id: '2'), Person(name: 'Bob', age: 25, id: '3')])

Slot APIs

Slot APIs refer to a technique where components have customizable parts or 'slots' that can be filled with content when the component is being used. This allows for greater reusability and flexibility in composing user interfaces. The content that fills these slots can be other components or simple UI elements like text or images.

Vue.js

javascript

// ParentComponent.vue
<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

// ChildComponent.vue
<template>
  <p>Child Content</p>
</template>

// Usage
<parent-component>
  <template v-slot:header>
    <h1>Header</h1>
  </template>
  <template v-slot:content>
    <child />
  </template>
</parent-component>

SwiftUI

swift

struct Parent<Header: View, Content: View>: View {
    let header: Header
    let content: Content

    var body: some View {
        VStack {
            header
            content
        }
    }
}

// Usage
Parent(
    header: Text("Header"),
    content: Child()
)

struct Child: View {
    var body: some View {
        Text("Child Content")
    }
}

Flutter

dart

class Parent extends StatelessWidget {
  final Widget header;
  final Widget content;

  Parent({required this.header, required this.content});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        header,
        content,
      ],
    );
  }
}

// Usage
Parent(
  header: Text("Header"),
  content: Child(),
)

class Child extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text("Child Content");
  }
}

Modifiers

Modifiers are used to adjust or configure the UI elements' appearance or behavior in a declarative UI framework.

Vue.js

Vue.js doesn't have a direct analog to modifiers in Jetpack Compose or SwiftUI. Instead, you can use inline styles or CSS classes.

javascript

<template>
  <div :style="style">Hello, World!</div>
</template>

<script setup>
import { reactive } from 'vue';

const style = reactive({
  padding: '16px',
  backgroundColor: 'blue',
  color: 'white'
});
</script>

SwiftUI

swift

struct ModifiersExample: View {
    var body: some View {
        Text("Hello, World!")
            .padding(EdgeInsets(top: 16, leading: 16, bottom: 16, trailing: 16))
            .background(Color.blue)
    }
}

Flutter

In Flutter, you can wrap widgets with other widgets to achieve similar effects.

dart

class ModifiersExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.0),
      color: Colors.blue,
      child: Text('Hello, World!', style: TextStyle(color: Colors.white)),
    );
  }
}

State

State management refers to the process of handling and updating the internal state of components, often in response to user interactions or other events.

Vue.js

javascript

<template>
  <button @click="incrementCount">
    Count: {{ count }}
  </button>
</template>

<script setup>
import { ref } from 'vue';

const count = ref(0);

function incrementCount() {
  count.value++;
}
</script>

SwiftUI

swift

struct Counter: View {
    @State private var count = 0

    var body: some View {
        Button(action: {
            count += 1
        }) {
            Text("Count: \(count)")
        }
    }
}

Flutter

dart

class Counter extends StatefulWidget {
  @override
  _CounterState createState() => _CounterState();
}

class _CounterState extends State<Counter> {
  int count = 0;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      onPressed: () => setState(() => count += 1),
      child: Text("Count: $count"),
    );
  }
}

Scoped Data Propagation

Scoped Data Propagation is a technique that involves passing data across multiple levels of a component subtree without having to explicitly pass it through every intermediate component. It helps reduce the complexity of prop drilling and allows for a more efficient way of sharing data in a specific scope.

Vue.js

javascript

<!-- ParentComponent.vue -->
<template>
  <intermediate />
</template>

<script setup>
import { provide, ref } from 'vue';
import Intermediate from './IntermediateComponent.vue';

const data = ref('Some data');
provide('dataKey', data);
</script>

<!-- IntermediateComponent.vue -->
<template>
  <child />
</template>

<script setup>
import Child from './ChildComponent.vue';
</script>

<!-- ChildComponent.vue -->
<template>
  <p>Received data: {{ data }}</p>
</template>

<script setup>
import { inject } from 'vue';

const data = inject('dataKey');
</script>


<!-- Usage -->
<parent-component data="Some data"></parent-component>

SwiftUI

swift

struct CustomEnvironmentKey: EnvironmentKey {
    static let defaultValue: String = ""
}

extension EnvironmentValues {
    var customData: String {
        get { self[CustomEnvironmentKey.self] }
        set { self[CustomEnvironmentKey.self] = newValue }
    }
}

struct Parent: View {
    let data: String

    var body: some View {
        Intermediate().environment(\.customData, data)
    }
}

struct Intermediate: View {
    var body: some View {
        Child()
    }
}

struct Child: View {
    @Environment(\.customData) private var data

    var body: some View {
        Text("Received data: \(data)")
    }
}

// Usage
Parent(data: "Some data")

Flutter

dart

class CustomInheritedWidget extends InheritedWidget {
  final String data;

  CustomInheritedWidget({required this.data, required Widget child})
      : super(child: child);

  @override
  bool updateShouldNotify(CustomInheritedWidget oldWidget) {
    return oldWidget.data != data;
  }

  static CustomInheritedWidget of(BuildContext context) {
    return context.dependOnInheritedWidgetOfExactType<CustomInheritedWidget>()!;
  }
}

class Parent extends StatelessWidget {
  final String data;

  Parent({required this.data});

  @override
  Widget build(BuildContext context) {
    return CustomInheritedWidget(
      data: data,
      child: Intermediate(),
    );
  }
}

class Intermediate extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Child();
  }
}

class Child extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final data = CustomInheritedWidget.of(context).data;
    return Text("Received data: $data");
  }
}

// Usage
Parent(data: "Some data")

Side Effects

A side effect involves executing code that can have external consequences or perform operations that are not directly related to rendering the UI, such as making network requests or updating external data sources.

Vue.js

javascript

<template>
  <div></div>
</template>

<script setup>
import { onMounted } from 'vue';

onMounted(() => {
  // Perform side effect here
});
</script>

SwiftUI

swift

struct SideEffectOnLoadComponent: View {
    @State private var hasPerformedSideEffect = false

    var body: some View {
        if !hasPerformedSideEffect {
            DispatchQueue.main.async {
                // Perform side effect, e.g. fetch data, update external data source
                hasPerformedSideEffect = true
            }
        }

        // Other UI components
        Text("Hello, World!")
    }
}

Flutter

dart

class SideEffectOnLoadComponent extends StatefulWidget {
  @override
  _SideEffectOnLoadComponentState createState() => _SideEffectOnLoadComponentState();
}

class _SideEffectOnLoadComponentState extends State<SideEffectOnLoadComponent> {
  @override
  void initState() {
    super.initState();
    // Perform side effect, e.g. fetch data, update external data source
  }

  @override
  Widget build(BuildContext context) {
    // Other UI components
    return Container();
  }
}

❤️ Support the site ➜

Learnt something new today? Thinking of a way to say "thank you"?

Consider supporting the site to continue getting unique insights, tips and tricks about Jetpack Compose. A cup of my favorite coffee goes a long way in helping me create new content 😅

The #1 destination for all things Jetpack Compose 🤖📱

Which Compose API?

Compare Frameworks

Compose Catalog

Compose Code Snippets