Created
August 26, 2024 01:35
-
-
Save alvinthen/86cb7724621490b0b6d65a7ffd1c2e04 to your computer and use it in GitHub Desktop.
useEffect example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Copyright 2019 the Dart project authors. All rights reserved. | |
| // Use of this source code is governed by a BSD-style license | |
| // that can be found in the LICENSE file. | |
| import 'dart:math'; | |
| import 'package:flutter/material.dart'; | |
| import 'package:flutter_hooks/flutter_hooks.dart'; | |
| void main() => runApp(const MyApp()); | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return MaterialApp( | |
| title: 'Flutter Demo', | |
| debugShowCheckedModeBanner: false, | |
| theme: ThemeData( | |
| colorSchemeSeed: Colors.blue, | |
| ), | |
| home: const MyHomePage(title: 'Flutter Demo Home Page'), | |
| ); | |
| } | |
| } | |
| class MyHomePage extends HookWidget { | |
| final String title; | |
| const MyHomePage({ | |
| super.key, | |
| required this.title, | |
| }); | |
| @override | |
| Widget build(BuildContext context) { | |
| final anotherCounter = useState(0); | |
| final counter = useState(0); | |
| final color = useState(Colors.black); | |
| final colorDependingCounter = useState(Colors.black); | |
| final colorChangeWheneverRebuild = useState(Colors.black); | |
| Color randomColor() { | |
| return Color(0xFFFFFFFF & Random().nextInt(0xFFFFFFFF)); | |
| } | |
| useEffect(() { | |
| colorDependingCounter.value = randomColor(); | |
| return null; | |
| }, [counter.value]); | |
| useEffect(() { | |
| color.value = randomColor(); | |
| return null; | |
| }, []); | |
| useEffect(() { | |
| colorChangeWheneverRebuild.value = randomColor(); | |
| return null; | |
| }); | |
| void _incrementCounter() { | |
| counter.value++; | |
| } | |
| return Scaffold( | |
| appBar: AppBar( | |
| title: Text(title), | |
| ), | |
| body: Center( | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| children: [ | |
| const Text( | |
| 'You have pushed the button this many times:', | |
| ), | |
| Text( | |
| '${counter.value}', | |
| style: Theme.of(context).textTheme.headlineMedium, | |
| ), | |
| Row( | |
| mainAxisAlignment: MainAxisAlignment.spaceEvenly, | |
| children: [ | |
| Container( | |
| height: 60, | |
| width: 100, | |
| color: color.value, | |
| child: Text( | |
| 'Will not change', | |
| ), | |
| ), | |
| Container( | |
| height: 60, | |
| width: 100, | |
| color: colorDependingCounter.value, | |
| child: Text( | |
| 'Change when counter change', | |
| ), | |
| ), | |
| Container( | |
| height: 60, | |
| width: 100, | |
| color: colorChangeWheneverRebuild.value, | |
| child: Text( | |
| 'Change whenenever build method re-runs', | |
| ), | |
| ), | |
| ], | |
| ), | |
| const SizedBox(height: 100), | |
| TextButton( | |
| onPressed: () { | |
| anotherCounter.value++; | |
| }, | |
| child: Text('Rebuild'), | |
| ), | |
| ], | |
| ), | |
| ), | |
| floatingActionButton: FloatingActionButton( | |
| onPressed: _incrementCounter, | |
| tooltip: 'Increment', | |
| child: const Icon(Icons.add), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment