Skip to content

Instantly share code, notes, and snippets.

@MelbourneDeveloper
Created November 29, 2023 23:54
Show Gist options
  • Select an option

  • Save MelbourneDeveloper/b59fdfa637188576d073dbfa53fd7689 to your computer and use it in GitHub Desktop.

Select an option

Save MelbourneDeveloper/b59fdfa637188576d073dbfa53fd7689 to your computer and use it in GitHub Desktop.

Revisions

  1. MelbourneDeveloper revised this gist Nov 29, 2023. 1 changed file with 2 additions and 0 deletions.
    2 changes: 2 additions & 0 deletions main.dart
    Original file line number Diff line number Diff line change
    @@ -33,6 +33,8 @@ class _MyHomePageState extends State<MyHomePage> {
    surname.addListener(_updateFullName);
    }

    /// This ensures that changing first or surname triggers
    /// a rebuild
    void _updateFullName() {
    fullName.value = '${name.value} ${surname.value}';
    }
  2. MelbourneDeveloper created this gist Nov 29, 2023.
    77 changes: 77 additions & 0 deletions main.dart
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,77 @@
    import 'package:flutter/material.dart';

    void main() => runApp(const MyApp());

    class MyApp extends StatelessWidget {
    const MyApp({super.key});

    @override
    Widget build(BuildContext context) => const MaterialApp(
    debugShowCheckedModeBanner: false,
    home: MyHomePage(),
    );
    }

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

    @override
    State<MyHomePage> createState() => _MyHomePageState();
    }

    class _MyHomePageState extends State<MyHomePage> {
    final ValueNotifier<String> name = ValueNotifier('Jane');
    final ValueNotifier<String> surname = ValueNotifier('Doe');
    late final ValueNotifier<String> fullName;

    @override
    void initState() {
    super.initState();
    fullName = ValueNotifier('${name.value} ${surname.value}');

    name.addListener(_updateFullName);
    surname.addListener(_updateFullName);
    }

    void _updateFullName() {
    fullName.value = '${name.value} ${surname.value}';
    }

    @override
    Widget build(BuildContext context) => Scaffold(
    appBar: AppBar(
    title: const Text('ValueNotifier Example'),
    ),
    body: Center(
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
    ValueListenableBuilder<String>(
    valueListenable: fullName,
    builder: (context, value, child) => Text(
    '${name.value} ${surname.value}',
    style: Theme.of(context).textTheme.headlineMedium,
    ),
    ),
    ElevatedButton(
    onPressed: () =>
    name.value = name.value == 'Jane' ? 'John' : 'Jane',
    child: const Text('Change First Name'),
    ),
    ElevatedButton(
    onPressed: () =>
    surname.value = surname.value == 'Doe' ? 'Dop' : 'Doe',
    child: const Text('Change Surname'),
    ),
    ],
    ),
    ),
    );

    @override
    void dispose() {
    name.dispose();
    surname.dispose();
    super.dispose();
    }
    }