Allows for easier and, dare I say, faster development and better maintenability. No 're-inventing of the wheel' using already built-in capabilities and features offered by Flutter itself.
Accommodating and Integrated features:
- Error Handling
- System Preferences
- App Notifications
- A Better Menu Bar
- Device Event Handling
- Date picker
- App Color picker
- Dialog Boxes
- Customizable Bottom Bar
- Loading Screen
- Time Zones
I don't like the version number suggested in the 'Installing' page. Instead, always go up to the 'major' semantic version number when installing this library package. This means always trailing with two zero, '.0.0'. This allows you to take in any 'minor' versions introducing new features as well as any 'patch' versions that involves bugfixes. Example, to install version 7.9.2, use 7.0.0. Thus, the bug fix, 7.9.2, will be installed the next time you 'upgrade' the dependencies.
- patch - bugfixes
- minor - Introduced new features
- major - Essentially made a new app. It's broken backwards-compatibility and has a completely new user experience. You won't get this version until you increment the major number in the pubspec.yaml file.
And so, in this case, add this to your package's pubspec.yaml file:
dependencies:
mvc_application:^8.9.0For more information on version numbers: The importance of semantic versioning.
Like many other design patterns, MVC separates three common 'areas of concern' found in computer programs. Specifically, there's the separation of the program's logic from its inteface and from its data. The many design patterns that have come into vogue since MVC's inception in the early 1970's are decendants of MVC.
Note, computer platforms themselves have come full circle in the last 40 years. From mainframes to desktop computers in the first twenty years, and then website applications to mobile apps in the last twenty years. A computer now fits in the palm of your hand, and because of this, MVC again fits as the design pattern and framework for the apps it runs.
Implementing the MVC framework using two common example apps:
import'package:mvc_application/view.dart';
import'package:mvc_application/controller.dart';
voidmain() =>runApp(MyApp());
classMyAppextendsAppStatefulWidget {
MyApp({Key? key}) :super(key: key);
@overrideAppStatecreateState() =>View();
}
classViewextendsAppState {
View()
:super(
title:'Flutter Demo',
home:constMyHomePage(),
debugShowCheckedModeBanner:false,
theme:ThemeData(
primarySwatch:Colors.blue,
),
);
}
classMyHomePageextendsStatefulWidget {
constMyHomePage({Key? key, this.title ='Flutter Demo Home Page'})
:super(key: key);
// Fields in a StatefulWidget should always be "final".finalString title;
@overrideStatecreateState() =>_MyHomePageState();
}
class_MyHomePageStateextendsStateMVC<MyHomePage> {
_MyHomePageState() :super(Controller()) {
con = controller asController;
}
lateController con;
@overrideWidgetbuild(BuildContext context) =>Scaffold(
appBar:AppBar(
title:Text(widget.title),
),
body:Center(
child:Column(
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
constText('You have pushed the button this many times:'),
Text(
'${con.counter}',
style:Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton:FloatingActionButton(
/// Try this alternative approach. /// The Controller merely mimics the Flutter's API// onPressed: con.onPressed,
onPressed: () =>setState(con.incrementCounter),
tooltip:'Increment',
child:constIcon(Icons.add),
),
);
}
classControllerextendsControllerMVC {
factoryController() => _this ??=Controller._();
Controller._()
: model =_Model(),
super();
staticController? _this;
final_Model model;
/// You're free to mimic Flutter's own API /// The Controller is able to talk to the View (the State object)voidonPressed() =>setState(() => model._incrementCounter());
intget counter => model.integer;
/// The Controller knows how to 'talk to' the Model.voidincrementCounter() => model._incrementCounter();
}
class_Model {
intget integer => _integer;
int _integer =0;
int_incrementCounter() =>++_integer;
}
import'package:english_words/english_words.dart'show generateWordPairs;
import'package:flutter/material.dart'hide runApp;
import'package:mvc_application/view.dart'show AppMVC, AppState, Colors, runApp, StateMVC;
import'package:mvc_application/controller.dart'show ControllerMVC;
voidmain() =>runApp(NameApp());
classNameAppextendsAppMVC {
NameApp({Key? key}) :super(key: key);
@overrideAppStatecreateState() =>MyApp();
}
classMyAppextendsAppState {
factoryMyApp() => _this ??=MyApp._();
MyApp._()
:super(
title:'Startup Name Generator',
home:constRandomWords(),
theme:ThemeData(
primaryColor:Colors.white,
),
debugShowCheckedModeBanner:false,
);
staticMyApp? _this;
}
classRandomWordsextendsStatefulWidget {
constRandomWords({Key? key}) :super(key: key);
@overrideStatecreateState() =>_RandomWordsState();
}
class_RandomWordsStateextendsStateMVC<RandomWords> {
_RandomWordsState() :super(_Controller()) {
con = controller as_Controller;
}
late_Controller con;
finalTextStyle _biggerFont =constTextStyle(fontSize:18.0);
@overrideWidgetbuild(BuildContext context) {
returnScaffold(
appBar:AppBar(
title:constText('Startup Name Generator'),
actions:<Widget>[
IconButton(
icon:constIcon(Icons.list),
onPressed: () {
pushSaved(context);
}),
],
),
body:_buildSuggestions(),
);
}
Widget_buildSuggestions() {
returnListView.builder(
padding:constEdgeInsets.all(16.0),
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.if (i.isOdd) returnconstDivider();
final index = i ~/2;
// If you've reached the end of the available word pairings...if (index >= con.length) {
// ...then generate 10 more and add them to the suggestions list.
con.addAll(10);
}
returnbuildRow(index);
},
);
}
voidpushSaved(BuildContext context) {
Navigator.of(context).push(
MaterialPageRoute<void>(
builder: (BuildContext context) {
finalIterable<ListTile> tiles =this.tiles;
List<Widget> divided;
if (tiles.isEmpty) {
divided = [];
} else {
divided =ListTile.divideTiles(
context: context,
tiles: tiles,
).toList();
}
returnScaffold(
appBar:AppBar(
title:constText('Saved Suggestions'),
),
body:ListView(children: divided),
);
},
),
);
}
WidgetbuildRow(int? index) {
if (index ==null|| index <0) index =0;
String something = con.something(index);
final alreadySaved = con.contains(something);
returnListTile(
title:Text(
something,
style: _biggerFont,
),
trailing:Icon(
alreadySaved ?Icons.favorite :Icons.favorite_border,
color: alreadySaved ?Colors.red :null,
),
onTap: () {
setState(() {
con.somethingHappens(something);
});
},
);
}
Iterable<ListTile> get tiles => con.mapHappens(
(String something) {
returnListTile(
title:Text(
something,
style: _biggerFont,
),
);
},
);
}
class_ControllerextendsControllerMVC {
// Supply only one instance of this Controller class.factory_Controller() => _this ??=_Controller._();
static_Controller? _this;
_Controller._() {
model =_Model();
}
late_Model model;
intget length => model.length;
voidaddAll(int count) => model.addAll(count);
Stringsomething(int index) => model.wordPair(index);
boolcontains(String something) => model.contains(something);
voidsomethingHappens(String something) => model.save(something);
Iterable<ListTile> mapHappens<ListTile>(ListTileFunction(String v) f) =>
model.saved(f);
}
class_Model {
finalList<String> _suggestions = [];
intget length => _suggestions.length;
StringwordPair(int? index) {
if (index ==null|| index <0) index =0;
return _suggestions[index];
}
boolcontains(String? pair) {
if (pair ==null|| pair.isEmpty) returnfalse;
return _saved.contains(pair);
}
finalSet<String> _saved = {};
voidsave(String? pair) {
if (pair ==null|| pair.isEmpty) return;
final alreadySaved =contains(pair);
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
}
Iterable<ListTile> saved<ListTile>(ListTileFunction(String v) f) =>
_saved.map(f);
Iterable<String> wordPairs([int count =10]) =>_makeWordPairs(count);
voidaddAll(int count) => _suggestions.addAll(wordPairs(count));
}
Iterable<String> _makeWordPairs(int count) =>generateWordPairs().take(count).map((pair) => pair.asPascalCase);Please begin with the article, ‘Flutter + MVC at Last!’
Follow up with Bazaar in MVC and Shrine in MVC and Weather App in "mvc pattern"
Optionally, there is the 3-part series beginning with, MVC in Flutter
Further articles include, A Design Pattern for Flutter.
Other Dart packages from the author can also be found at Pub.dev