What is Dart?<\/h2>\n\n\n\n
Dart is the programming language that Flutter uses. It is focused on building front-end user interfaces and front-end apps. By using it, you will be able to create either web apps or mobile apps.<\/p>\n\n\n\n
It is developed by Google and is a class-based, object-oriented, and strongly typed programming language. Dart\u2019s syntax is very similar to languages like Java or JavaScript, so if you have some experience with those, it will be easy for you to begin using it.<\/p>\n\n\n\n
Union means strength<\/h2>\n\n\n\n
So Flutter and Dart are actually two independent things that work together. Flutter is a framework for Dart, and Dart uses the capabilities of Flutter to build the app. In the end, Flutter working as an SDK will help to build the app.<\/p>\n\n\n\n
Even though you\u2019ll only have one code base, if at any specific moment you need to differentiate for the platforms you are building for, Flutter will give you the tools to find the platform you are running on and act accordingly either for iOS or Android.<\/p>\n\n\n\n
Widgets<\/h2>\n\n\n\n
Flutter is built using widgets. If you have spent time in React\u2019s world, you could say that a widget is a component. Essentially, it is a snippet of code with some instructions that will have to be beside other widgets and interact with them.<\/p>\n\n\n\n
Let\u2019s take a look:<\/p>\n\n\n\n On a simple view like this, you will have a bunch of widgets working together:<\/p>\n\n\n\n So you will be creating a widget\u2019s tree, with one main root. You might have different views and inside these, you could also have several sections that are composed of a set of widgets.<\/p>\n\n\n\n Another aspect about widgets is the fact that there is not only one type, but different types of widgets that can be divided into the following categories:<\/p>\n\n\n\n First of all, install Flutter and follow all the steps described to set up your env in the following link: https:\/\/flutter.dev\/docs\/get-started\/install<\/a>.<\/p>\n\n\n\n Once you\u2019re done with that, it’s time to create your first Flutter app by using the command line:<\/p>\n\n\n\n flutter create your_app_name<\/em><\/strong><\/p>\n\n\n\n The app\u2019s name must include underscores to separate each word.<\/p>\n\n\n\n cd your_app_name<\/em><\/strong><\/p>\n\n\n\n Go inside your folder\u2019s app.<\/p>\n\n\n\n flutter run<\/em><\/strong><\/p>\n\n\n\n Then execute this command and you should see the default Flutter app running on your device or your emulator.<\/p>\n\n\n\n Caveat: In this app, you will find that by default, Flutter is using the material design system, but you will not be attached to this. Flutter also provides iOS-styled widgets (Cupertino Widgets) and both of them are highly customizable, so you can even have your own styled app.<\/p>\n\n\n\n The majority of the files and folders you will find are intended for configuration. Let’s take a look at the most important ones:<\/p>\n\n\n\n As mentioned earlier, Flutter is made of widgets, which we need to draw something on the screen.<\/p>\n\n\n\n In the code above, we have one main class, MyApp<\/em><\/strong>, that is extending a Flutter class (widget) called StatelessWidget<\/em><\/strong>.<\/p>\n\n\n\n This class needs to define a build method that must return a widget that at the end will be the element rendered in the screen. For that purpose, we use the MaterialApp<\/em><\/strong> class and inside its home property, we make use of another widget, Text<\/em><\/strong>, to render a string.<\/p>\n\n\n\n Finally, all this code will run inside the main<\/em><\/strong> function (the first function to be called when running the application), which in turn will also run another function runApp<\/em><\/strong> to mount its given widget as the root widget<\/strong> and attach it to the screen. <\/p>\n\n\n\n This is a tiny sample, but as you can see we used many widgets above and it can be cumbersome initially, but that\u2019s actually the way Flutter works \u2014 the user interface is composed by mixing widgets together.<\/p>\n\n\n\n A StatelessWidget does not have any mutable state that it needs to track. Instead, it is composed of other children widgets, and it has a build method for that.<\/p>\n\n\n\n All the new widgets extending the StatelessWidget<\/em><\/strong> would not track data over time or trigger re-builds by themselves.<\/p>\n\n\n\n In the above example, we have a new widget UserTitle<\/em><\/strong> that only makes use of its final property userName. That property never changes over time and it is finally rendered inside the Text<\/em><\/strong> widget.<\/p>\n\n\n\n This component only will be rebuilt when its input data changes.<\/em><\/p>\n\n\n\n A StatelessWidget provides immutable configuration info and a state object that can change over time and fire rebuilds.<\/p>\n\n\n\n For this kind of widget we would need two classes:<\/p>\n\n\n\n By using the method setState<\/em><\/strong>, we can make a change to the state object \u2014 in this case, to increase the appsCount<\/em><\/strong> property. This change will finally trigger a rebuild in the UI (more specifically on its children) to reflect the new value.<\/p>\n\n\n\n This component will be rebuilt when its input or internal data changes.<\/em><\/p>\n\n\n\n Passing data from one widget to another can be cumbersome. Inherited widgets help children widgets to access data from a parent one directly.<\/p>\n\n\n\n In the code above, the class ColorInfo<\/em><\/strong> extends the InheritedWidget<\/em><\/strong> and it only has a required property child<\/em><\/strong>, then we can add any property (or properties) that we actually want to be inherited, in this case, it is colors<\/em><\/strong>.<\/p>\n\n\n\n ColorInfo<\/em><\/strong> also has two methods:<\/p>\n\n\n\n Then we will have a children widget using the inherited widget, for our example, it is WidgetThatUsesTheColorInfo<\/em><\/strong>, on its build<\/strong> method, more exactly when using the Text<\/em><\/strong> widget the style property uses the ColorInfo<\/strong> widget, and then it calls its of <\/em><\/strong>method to access the inherited property colors<\/em><\/strong>.<\/p>\n\n\n\n We want to create a little poll, in which we are going to present the user with two questions separately and each time he\/she will have two possible answers.<\/p>\n\n\n\n Let\u2019s start with the main widget, a stateful one:<\/p>\n\n\n\n Main.dart<\/em><\/strong><\/p>\n\n\n\n This is our awesome app now:<\/p>\n\n\n\n We have defined a StatefulWidget MyApp<\/em><\/strong> and below it, we have its state. With this last one, we implement some rebuilds inside the app each time a button is pressed (by executing the _answerQuestion<\/em><\/strong> function ) to present a new question and some new possible answers.<\/p>\n\n\n\n We do this until our questions counter is less than 2. At that point, we change the widget rendered by our root component and now we present a simple widget with a message inside it.<\/p>\n\n\n\n This is a widget that implements the basic material design visual layout structure.<\/em><\/p>\n\n\n\n The most common scenario is to use its <\/em>AppBar<\/em><\/strong> property to add a (yes, you got it)<\/em><\/p>\n\n\n\n App bar for the app, followed by its <\/em>Body<\/em><\/strong> property where the app content could be rendered.<\/em><\/p>\n\n\n\n This is a widget that will render its children in a vertical array. It receives a <\/em>children<\/em><\/strong> property where you can list all the internal widgets that a column is going to have.<\/em><\/p>\n\n\n\n If the content is larger than the column\u2019s height, it will not add a scroll and conversely will cut the content.<\/em><\/p>\n\n\n\n Let\u2019s add some styling for the app\u2019s question. We\u2019ll start by taking it to an isolated file:<\/p>\n\n\n\n First, let\u2019s go and update the main file:<\/p>\n\n\n\n main.dart<\/em><\/strong><\/p>\n\n\n\n Replace: <\/p>\n\n\n\n With:<\/p>\n\n\n\n Now it\u2019s time for the custom file creation:<\/p>\n\n\n\n Question.dart<\/em><\/strong><\/p>\n\n\n\n Now we are using a custom widget inside our app. Let\u2019s take a look at some of its children widgets.<\/p>\n\n\n\n This widget helps to decorate, positioning, and composing children widgets. With this one, you can add padding, margin, borders, or even background color. In the previous code, we wrapped a <\/em>Text<\/em><\/strong> widget inside the container, and we set the container\u2019s width to expand to the available space and apply some margin (top, right, bottom, left).<\/em><\/p>\n\n\n\n This widget only accepts children that must be placed in a property with the same name.<\/em><\/p>\n\n\n\n Another type of element with just one children property includes:<\/em><\/p>\n\n\n\n It is a widget to render any string on the screen. It accepts one position value that must be a string<\/em><\/strong>, but then it has some named properties to configure the current text.<\/p>\n\n\n\n One of the named properties of the Text<\/em><\/strong> widget. It will allow applying some styles to the text. In the example above, we used fontSize<\/em><\/strong>, color<\/em><\/strong>, and fontWeight<\/em><\/strong>. Each of these properties has a specific type so its value must respect that.<\/p>\n\n\n\n Let\u2019s take a look at a new, more styled version of our root Widget. It will still be a StatefulWidget <\/em><\/strong>but with some add-ons:<\/p>\n\n\n\n This widget is pretty similar to the one that we used on the previous version of this small app, but the special thing about this one is that its properties can be animated.<\/p>\n\n\n\n You can see how we are using the _color<\/em><\/strong> variable to change the container color, and that change is going to have an effect anytime the user presses a button and changes the question.<\/p>\n\n\n\n This is one approach but with any gesture or button to enumerate some, you can dynamically change the AnimatedContainer<\/em><\/strong>properties and create some cool animations for your app.<\/p>\n\n\n\n So this is our app now. Its design isn\u2019t state-of-the-art, but at least we have some color: <\/p>\n\n\n\n Finally, let’s modify those buttons a little bit.<\/p>\n\n\n\n Since we now want to implement some custom buttons, it’s a good idea to create a custom widget that holds its shape and style. With that, we have its configuration in just one place, and we can re-use it anywhere.<\/p>\n\n\n\n The above code creates the StatelessWidget CircularButton<\/em><\/strong> that receives three positional arguments (onPress, text, value), which will be used to configure the dynamic widget\u2019s properties.<\/p>\n\n\n\n This creates a button based on the material Button widgets. You can configure several properties to create your own custom button. With the code above, we created a circular button by setting its shape as CircleBorder<\/em><\/strong> and adding a big value for the padding<\/em><\/strong> property.<\/p>\n\n\n\n Now we can import this button into our main file and replace the ElevatedButton<\/em><\/strong> with our custom button widget.<\/p>\n\n\n\n Besides using the new button component, we have changed the parent layout widget. Now we are making use of Stack<\/em><\/strong>, and like its direct children, we are using the Positioned<\/em><\/strong> widget. The combination of these two will let us position some elements in an \u201cabsolute\u201d way.<\/p>\n\n\n\n Unlike column, row, or other container-based widgets, Stack will allow the creation of a view with overlapping widgets. It will accept a list of children widgets to define its size, but you can easily override that behavior and configure it to expand and take the full space of its parent container.<\/p>\n\n\n\n By default, all widgets will be positioned at the Stack\u2019s topStart corner.<\/p>\n\n\n\n A widget that controls where a child of a Stack is positioned.<\/p>\n\n\n\n With the use of its position properties (top, right, bottom, left), we can position its children relative to the Stack Widget.<\/p>\n\n\n\n With the above changes now our app looks like this:<\/p>\n\n\n\n As you can see, the composition is all inside Flutter. We are constantly nesting widgets. Flutter comes with a long, long, long list of widgets that you can use and mix to create your custom ones. In this article, we tackle only some of the most basic ones.<\/p>\n\n\n\n This is only one small piece of Flutter. The path is long and there are plenty of topics to learn about Flutter:<\/p>\n\n\n\n Flutter is a growing technology nowadays and is winning an important place in the development world, so go ahead and keep learning about it!<\/p>\n\n\n\n If you\u2019re interested in working with Flutter and helping companies develop their Flutter projects, visit our careers page<\/a>. Also, if you\u2019re a leader looking to develop your Flutter project but need some expert resources, check out our Flutter Developers<\/a> page to learn more about our available talent.<\/p>\n","protected":false},"excerpt":{"rendered":"Flutter is a growing mobile framework developed by Google, designed to help in the development of mobile and…\n","protected":false},"author":1,"featured_media":82,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_singular_sidebar":"","csco_page_header_type":"","csco_appearance_grid":"","csco_page_load_nextpost":"","csco_post_video_location":[],"csco_post_video_location_hash":"","csco_post_video_url":"","csco_post_video_bg_start_time":0,"csco_post_video_bg_end_time":0,"footnotes":""},"categories":[14,4],"tags":[],"class_list":{"0":"post-81","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-flutter","8":"category-programming","9":"cs-entry","10":"cs-video-wrap"},"_links":{"self":[{"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/posts\/81","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/comments?post=81"}],"version-history":[{"count":1,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/posts\/81\/revisions"}],"predecessor-version":[{"id":83,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/posts\/81\/revisions\/83"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/media\/82"}],"wp:attachment":[{"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/media?parent=81"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/categories?post=81"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.aryapurwadana.com\/index.php\/wp-json\/wp\/v2\/tags?post=81"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d1fec4a45bcf565257e832_2OBA3jbO6vxWtaRilOXc_g-41kdshnfqdFV3j1QQR-h1djdU16Eok1PjVtiuxtXLPDrL_NVrW5ljt5RpUo0dSjpYYWs8OPtXs86n5GLF0SXcIyhOTdvDTDRiTa3Tbsflabg5moyC.png\")
<\/figure>\n\n\n\n\n
![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d1fec498dbacdffac95871_PnPOCsaq9CBMQx5Zqihf6Z21_aAcBuaXmj0v5nzbSuuloyRB8eUoVqgnaTSwmhZXLZtP4nAi4cazzbBFSjdIZDayEkdoMbWJFrypBfyeZfda9awhk_9i7KQvZHZZ8YpW3tOK__16.png\")
<\/figure>\n\n\n\n\n
Let\u2019s get our hands dirty<\/h2>\n\n\n\n
Creating the first app<\/h3>\n\n\n\n
Project Structure<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d1ff56ac36e14c10a58415__mflUxrxl5qHBF0p4UF7XEcBgq0jb7u_XcngIvv6qyLt-by2SQlddfpDXmuvUeoKc5F-bnuUU5wNPuGEqP3ED4TMTuXkMildAEGV-3EFTWEylG4sUpCUlCMhJ8sqU43WE-GGOi8k.png\")
<\/figure>\n\n\n\n\n
First lines of code<\/h3>\n\n\n\n
\nvoid main() {\n runApp(MyApp);\n}\n\nclass MyApp extends StatelessWidget {\n Widget build(BuildContext context) {\n return MaterialApp(home: Text('Hello!'))\n }\n}\n\n<\/code><\/pre>\n\n\n\nBase flutter widgets<\/h2>\n\n\n\n
StatelessWidget<\/h3>\n\n\n\n
\nclass UserTitle extends StatefulWidget {\n final String userName;\n\n UserTitle(this.userName);\n\n @override\n Widget build(BuildContext context) {\n return DecorateBox(\n decoration: BoxDecoration(color: Colors.amber),\n child: Text(userName)\n );\n }\n}\n\n<\/code><\/pre>\n\n\n\nStatefulWidget<\/h3>\n\n\n\n
\n
\nclass UserTitle extends StatefulWidget {\n final String userName;\n\n UserTitle({this.userName});\n\n @override\n _ItemFlutterAppsCounter createState() => _ItemFlutterAppsCounter();\n}\n\nclass _ItemFlutterAppsCounter extends State<UserTitle> {\n int appsCount = 1;\n\n @override\n Widget build(BuildContext context) {\n return GestureDetector(\n onTap: () {\n setState(() {\n appCount++;\n })\n },\n child: Text('The user ${widget.userName} has ${appsCount} flutter apps');\n );\n }\n}\n\n<\/code><\/pre>\n\n\n\nInherited Widgets<\/h4>\n\n\n\n
\nclass ColorInfo extends InheritedWidget {\n final List<Color> colors;\n\n ColorInfo({ this.colors, required Widget child}) : super(child: child);\n\n static ColorInfo of(BuildContext context) => context.inheritedFromWidgetOfExactType(ColorInfo);\n\n bool updateShouldNotify(ColorInfo oldWidget) => oldWidget.colors != colors;\n}\n\n<\/code><\/pre>\n\n\n\n\n
\nClass WidgetThatUsesTheColorInfo extends statelessWidget {\n Widget build(BuildContext context) {\n return Text(\n 'Test text',\n style: TextStyle(color: ColorInfo.of(context).colors);\n );\n }\n}\n\n<\/code><\/pre>\n\n\n\nLet\u2019s create something more styled<\/h2>\n\n\n\n
\n\/\/ importing our main package\n\nimport 'package:flutter\/material.dart';\n\n\/\/ the app's entry point, that mounts our root widget\n\nvoid main() => runApp(MyApp());\n\n\/\/ This would be our main widget\n\nclass MyApp extends StatefulWidget {\n\n \/\/ Here we create MyApp state\n @override\n _MyAppState createState() {\n return _MyAppState();\n }\n}\n\n\/\/ This is the class that holds MyApp's state\n\nclass _MyAppState extends State<MyApp> {\n var _questionIndex = 0;\n\n\n\/\/ Creating some variables that will be used\n var _questions = [\n 'What color do you like the most?',\n 'What\\'s your favorite weather?',\n ];\n\n var _answers = [\n ['Red', 'Green', 'Blue'],\n ['Sunny Day', 'Cloudy Day', 'Snowing Day'],\n]\n\n<\/code><\/pre>\n\n\n\n\n\/\/ This is the method that will update the state\n void _answerQuestion(String answer) {\n setState(() {\n if (_questionIndex < 2) {\n _questionIndex = _questionIndex + 1;\n }\n });\n }\n\n\n\/\/ This is the build method it will present some questions if `_questionIndex` is minor than 3 and a text if that condition is not true\n\n @override\n Widget build(BuildContext context) {\n if (_questionIndex < 2) {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(title: Text(\"Personality Test\")),\n body: Column(\n children: [\n Text(_questions[_questionIndex]),\n ElevatedButton(\n onPressed: () => _answerQuestion(_answers[_questionIndex][0]),\n child: Text(_answers[_questionIndex][0])),\n ElevatedButton(\n onPressed: () => _answerQuestion(_answers[_questionIndex][1]),\n child: Text(_answers[_questionIndex][1])),\n ],\n ),\n ),\n );\n } else {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(title: Text(\"Liar Test\")),\n body: Column(\n children: [\n Text('We don\u2019t know anything about your personality, but the app looks good!'),\n ],\n ),\n ),\n );\n }\n }\n}\n\n<\/code><\/pre>\n\n\n\n![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d204d60a4f131dea754986_uvzIo9Uq0QlhDRDueco3qPFlHH8MdheND1Kj53xMoXOoMvpYxrRD0YBbzrHZPRCeR39x_d4D8HKJIZWz-h6SCDqccCm38DXjlc7eHcNvoiGX4HGeeendWNuhg3jgJdTxhBIFg016.png\")
Scaffold:<\/h3>\n\n\n\n
Column (layout):<\/h3>\n\n\n\n
\nimport 'package:flutter_app\/question.dart';\n\n<\/code><\/pre>\n\n\n\n\nText(_questions[_questionIndex]),\n\n<\/code><\/pre>\n\n\n\n\nQuestion(_questions[_questionIndex]),\n\n<\/code><\/pre>\n\n\n\n\nimport 'package:flutter\/material.dart';\n\nclass Question extends StatelessWidget {\n final String questionText;\n\n Question(this.questionText);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: Text(\n questionText,\n style: TextStyle(\n fontSize: 40,\n color: Color.fromRGBO(255, 255, 255, 1),\n fontWeight: FontWeight.bold,\n ),\n textAlign: TextAlign.left,\n ),\n margin: EdgeInsets.all(40),\n width: double.infinity,\n );\n }\n}\n\n<\/code><\/pre>\n\n\n\nContainer: (layout widget)<\/h3>\n\n\n\n
\n
Text: (UI Widget)<\/h3>\n\n\n\n
TextStyle: (Style Widget)<\/em><\/h3>\n\n\n\n
Using the custom Widget in our root widget<\/h2>\n\n\n\n
\nimport 'package:flutter\/material.dart';\n\/\/ Importing of the new custom widget: Question\nimport 'package:flutter_app\/question.dart';\n\/\/ Importing of dart\u2019s math package\nimport 'dart:math';\n\nvoid main() => runApp(MyApp());\n\nclass MyApp extends StatefulWidget {\n @override\n _MyAppState createState() {\n return _MyAppState();\n }\n}\n\nclass _MyAppState extends State<MyApp> {\n var _questionIndex = 0;\n \/\/ New color variable\n var _color = Colors.deepOrange[400];\n\n var _questions = [\n 'What color do you like the most?',\n 'What\\'s your favorite weather?',\n ];\n\n var _answers = [\n ['Red', 'Green', 'Blue'],\n ['Sunny Day', 'Cloudy Day', 'Snowing Day'],\n ];\n\n \nvoid _answerQuestion(String answer) {\n setState(() {\n final random = Random();\n\n if (_questionIndex < 2) {\n _questionIndex = _questionIndex + 1;\n }\n\n \/\/ Generate a random color, and setting it as the value for _color\n _color = Color.fromRGBO(\n random.nextInt(256),\n random.nextInt(256),\n random.nextInt(256),\n .8,\n );\n });\n }\n\n @override\n Widget build(BuildContext context) {\n if (_questionIndex < 3) {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(title: Text(\"Personality Test\")),\n \/\/ New AnimatedContainer widget\n body: AnimatedContainer(\n child: Column(\n children: [\n Question(_questions[_questionIndex]),\n ElevatedButton(\n onPressed: () =>\n _answerQuestion(_answers[_questionIndex][0]),\n child: Text(_answers[_questionIndex][0])),\n ElevatedButton(\n onPressed: () =>\n _answerQuestion(_answers[_questionIndex][1]),\n child: Text(_answers[_questionIndex][1])),\n ],\n ),\n \/\/ AnimatedContainer named properties\n duration: Duration(seconds: 1),\n height: double.infinity,\n width: double.infinity,\n \/\/ color property takes it\u2019s value from the dynamic _color var\n color: _color,\n ),\n ),\n );\n\n\n } else {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(title: Text(\"Liar Test\")),\n \/\/ New AnimatedContainer widget\n body: AnimatedContainer(\n child: Center(\n child: Text(\n 'We don\\\u2019t know anything about you personality, but the app looks good!',\n style: TextStyle(\n fontSize: 40,\n color: Color.fromRGBO(255, 255, 255, 1),\n fontWeight: FontWeight.bold,\n ),\n textAlign: TextAlign.center,\n ),\n ),\n duration: Duration(seconds: 1),\n height: double.infinity,\n width: double.infinity,\n \/\/ color property takes it\u2019s value from the dynamic _color var\n color: _color,\n ),\n ),\n );\n }\n }}\n\n<\/code><\/pre>\n\n\n\nAnimatedContainer: (layout widget)<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d205eadc0531c7968f6a07_-tTAweuVz0CB1VVDIkweU1KhsSRkKCnDhYVCFdmSWr-nANcjJPir-71ynUqh-ECGzLe_lSex-4xJu1RCvSOKShZoe_Qkdd-gPpf49NaISSGmOW21ZHFUti5Gph1W-Zcr222rA-I1.png\")
<\/figure>\n\n\n\n\nimport 'package:flutter\/material.dart';\n\nclass CircularButton extends StatelessWidget {\n final Function onPress;\n final String text;\n final String value;\n\n CircularButton(this.onPress, this.text, this.value);\n\n @override\n Widget build(BuildContext context) {\n return Container(\n child: RawMaterialButton(\n onPressed: () => onPress(value),\n child: Text(text),\n fillColor: Colors.cyan[100],\n splashColor: Colors.white,\n padding: EdgeInsets.all(70),\n shape: CircleBorder(),\n textStyle: TextStyle(\n color: Colors.blueGrey[900],\n fontSize: 20,\n ),\n ),\n margin: EdgeInsets.all(10),\n );\n }\n}\n\n<\/code><\/pre>\n\n\n\nRawMaterialButton: (Ui widget)<\/h3>\n\n\n\n
\n@override\n Widget build(BuildContext context) {\n if (_questionIndex < 3) {\n return MaterialApp(\n home: Scaffold(\n appBar: AppBar(title: Text(\"Personality Test\")),\n body: AnimatedContainer(\n child: Stack(\n children: [\n Positioned(\n child: Question(_questions[_questionIndex]),\n left: 40,\n top: 34.0,\n ),\n Positioned(\n child: CircularButton(\n _answerQuestion,\n _answers[_questionIndex][0],\n _answers[_questionIndex][0],\n ),\n left: 24.0,\n top: 325.0,\n ),\n Positioned(\n child: CircularButton(\n _answerQuestion,\n _answers[_questionIndex][1],\n _answers[_questionIndex][1],\n ),\n left: 150.0,\n top: 470.0,\n ),\n Positioned(\n child: CircularButton(\n _answerQuestion,\n _answers[_questionIndex][2],\n _answers[_questionIndex][2],\n ),\n left: 150.0,\n\n \n top: 180.0,\n ),\n ],\n ),\n duration: Duration(seconds: 1),\n height: double.infinity,\n width: double.infinity,\n color: _color,\n ),\n ),\n );\n }\n\n<\/code><\/pre>\n\n\n\nStack: (layout widget)<\/h3>\n\n\n\n
Positioned: (layout widget)<\/h3>\n\n\n\n
![\"\"\/](\"https:\/\/assets-global.website-files.com\/5d9bc5d562ffc22c37470958\/60d206873a8b400c665ee948_fMr3uaIMOFQPaaDy3XIb4vxBMYqBvQPWmteq5dBBXQm7qR2Mtb3d1T5O-wnI3UKq52zSk6gMxxW3Xzko4KYsjU5vFxUGn3mwFv67lWfo93RofPe546gEsK-7lUlIaJ4fhjj5tdOW.png\")
<\/figure>\n\n\n\n\n