Compare Declarative Frameworks

<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>

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)

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)

<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>

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"),
    );
  }
}

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

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

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

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

<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>

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')])

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")])

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

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

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

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)),
    );
  }
}

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

<!-- 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>

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")

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")