Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Comparing Flutter to what it might look like in Kotlin, Dart.soon, and Dart.wishlist
/**
* This is a quick proof of concept to illustrate how the principles of Kotlin/Anko could be used to make Flutter
* more designer-friendly.
*
* Some liberty was taken with APIs. The constructors (Scaffold, AppBar) were lower-cased.
* The Flutter API uses uppercase for class names.
*
* @see Single Expression Functions (https://kotlinlang.org/docs/reference/functions.html#single-expression-functions)
* @see Groovy-Style Builders (https://kotlinlang.org/docs/reference/type-safe-builders.html)
* @see Extension Functions/Properties (https://kotlinlang.org/docs/reference/extensions.html#extension-properties)
* @see Anko Layouts (https://github.com/Kotlin/anko#anko-layouts-wiki)
*/
class TutorialHome : StatelessWidget {
override
fun build(context: BuildContext) = scaffold {
appBar = appBar {
leading = iconButton {
iconImage = Icon(Icons.menu)
tooltip = "Navigation menu"
onPressed = null
}
titleText = "Example title"
actions = [ // based on https://twitter.com/abreslav/status/867714627060322305
iconButton {
iconImage = Icon(Icons.search)
tooltip = "Search"
onPressed = null
}
]
}
body = center {
// Remember: This is a fully functional programming environment. You can execute any code you can think of.
child = Text("Hello ${MyApp.users.me.fullName.split(" ").first}!")
}
floatingActionButton = fab {
tooltip = "Add"
childImage = Icon(Icons.add)
onPressed = null
}
}
}
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Scafold is a layout for the major material design widgets.
return new Scaffold(
appBar: new AppBar(
leading: new IconButton(
icon: new Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: new Text('Example title'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
// body is the majority of the screen.
body: new Center(
child: new Text('Hello, world!'),
),
floatingActionButton: new FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: new Icon(Icons.add),
onPressed: null,
),
);
}
}
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold( // implicit new!, also matching your Kotlin here
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu),
tooltip: 'Navigation menu',
onPressed: null,
),
title: Text('Example title'),
actions: [ // Dart + strong mode will infer the contents of the list
IconButton(
icon: Icon(Icons.search),
tooltip: 'Search',
onPressed: null,
),
],
),
// body is the majority of the screen.
body: Center(
child: Text('Hello, world!'),
),
floatingActionButton: FloatingActionButton(
tooltip: 'Add', // used by assistive technologies
child: Icon(Icons.add),
onPressed: null,
),
)
}
class TutorialHome extends StatelessWidget {
@override
Widget build(BuildContext context) => Scaffold( // implicit new!, also matching your Kotlin here
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.menu)
tooltip: 'Navigation menu'
onPressed: null
)
title: Text('Example title')
actions: [ // Dart + strong mode will infer the contents of the list
IconButton(
icon: Icon(Icons.search)
tooltip: 'Search'
onPressed: null
)
]
)
// body is the majority of the screen.
body: Center(
child: Text('Hello, world!')
)
floatingActionButton: FloatingActionButton(
tooltip: 'Add' // used by assistive technologies
child: Icon(Icons.add)
onPressed: null
)
)
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.