From 6065064687fa3e47480c49dc8c510407ff2b1055 Mon Sep 17 00:00:00 2001 From: NickZt Date: Tue, 9 Nov 2021 17:25:11 +0200 Subject: [PATCH] cleaned states management in view --- .story.md | 9 ++++--- lib/main.dart | 69 +++++---------------------------------------------- 2 files changed, 11 insertions(+), 67 deletions(-) diff --git a/.story.md b/.story.md index 2b9e3ba..b8b5756 100644 --- a/.story.md +++ b/.story.md @@ -1,9 +1,10 @@ --- -focus: pubspec.yaml:26 +focus: lib/main.dart:30 --- -### MVI & Clean Code: Rendering Logic of State in Flutter : Riverpod story : Let's go to business +### MVI & Clean Code: Rendering Logic of State in Flutter : Riverpod story : The first step is to clear the unnecessary -Let's start. We create a new project. Android studio will create a project with a counter by default. -We will use it further. Let's add a riverpod dependency to pubspec.yaml. \ No newline at end of file +The purpose of this article is to show you how to make your Flutter project more maintainable by separating state and logic from the user interface. + In the project created by default, the counter has the states of the widgets and the logic is directly in the widgets of the user interface. + Let's start changing. I will remove the state management from the widgets. \ No newline at end of file diff --git a/lib/main.dart b/lib/main.dart index d8a0526..2a47795 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -27,87 +27,30 @@ class MyApp extends StatelessWidget { } } -class MyHomePage extends StatefulWidget { - MyHomePage({Key key, this.title}) : super(key: key); - - // This widget is the home page of your application. It is stateful, meaning - // that it has a State object (defined below) that contains fields that affect - // how it looks. - - // This class is the configuration for the state. It holds the values (in this - // case the title) provided by the parent (in this case the App widget) and - // used by the build method of the State. Fields in a Widget subclass are - // always marked "final". - - final String title; - - @override - _MyHomePageState createState() => _MyHomePageState(); -} - -class _MyHomePageState extends State { - int _counter = 0; - - void _incrementCounter() { - setState(() { - // This call to setState tells the Flutter framework that something has - // changed in this State, which causes it to rerun the build method below - // so that the display can reflect the updated values. If we changed - // _counter without calling setState(), then the build method would not be - // called again, and so nothing would appear to happen. - _counter++; - }); - } - +class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { - // This method is rerun every time setState is called, for instance as done - // by the _incrementCounter method above. - // - // The Flutter framework has been optimized to make rerunning build methods - // fast, so that you can just rebuild anything that needs updating rather - // than having to individually change instances of widgets. return Scaffold( appBar: AppBar( - // Here we take the value from the MyHomePage object that was created by - // the App.build method, and use it to set our appbar title. - title: Text(widget.title), + title: Text('My Counter App'), ), body: Center( - // Center is a layout widget. It takes a single child and positions it - // in the middle of the parent. child: Column( - // Column is also a layout widget. It takes a list of children and - // arranges them vertically. By default, it sizes itself to fit its - // children horizontally, and tries to be as tall as its parent. - // - // Invoke "debug painting" (press "p" in the console, choose the - // "Toggle Debug Paint" action from the Flutter Inspector in Android - // Studio, or the "Toggle Debug Paint" command in Visual Studio Code) - // to see the wireframe for each widget. - // - // Column has various properties to control how it sizes itself and - // how it positions its children. Here we use mainAxisAlignment to - // center the children vertically; the main axis here is the vertical - // axis because Columns are vertical (the cross axis would be - // horizontal). mainAxisAlignment: MainAxisAlignment.center, children: [ + Text('You have pushed the button this many times:'), Text( - 'You have pushed the button this many times:', - ), - Text( - '$_counter', + '0', style: Theme.of(context).textTheme.headline4, ), ], ), ), floatingActionButton: FloatingActionButton( - onPressed: _incrementCounter, + onPressed: () {}, tooltip: 'Increment', child: Icon(Icons.add), ), // This trailing comma makes auto-formatting nicer for build methods. ); } -} +} \ No newline at end of file