• Guest
HabraHabr
  • Main
  • Users

  • Development
    • Programming
    • Information Security
    • Website development
    • JavaScript
    • Game development
    • Open source
    • Developed for Android
    • Machine learning
    • Abnormal programming
    • Java
    • Python
    • Development of mobile applications
    • Analysis and design of systems
    • .NET
    • Mathematics
    • Algorithms
    • C#
    • System Programming
    • C++
    • C
    • Go
    • PHP
    • Reverse engineering
    • Assembler
    • Development under Linux
    • Big Data
    • Rust
    • Cryptography
    • Entertaining problems
    • Testing of IT systems
    • Testing Web Services
    • HTML
    • Programming microcontrollers
    • API
    • High performance
    • Developed for iOS
    • CSS
    • Industrial Programming
    • Development under Windows
    • Image processing
    • Compilers
    • FPGA
    • Professional literature
    • OpenStreetMap
    • Google Chrome
    • Data Mining
    • PostgreSQL
    • Development of robotics
    • Visualization of data
    • Angular
    • ReactJS
    • Search technologies
    • Debugging
    • Test mobile applications
    • Browsers
    • Designing and refactoring
    • IT Standards
    • Solidity
    • Node.JS
    • Git
    • LaTeX
    • SQL
    • Haskell
    • Unreal Engine
    • Unity3D
    • Development for the Internet of things
    • Functional Programming
    • Amazon Web Services
    • Google Cloud Platform
    • Development under AR and VR
    • Assembly systems
    • Version control systems
    • Kotlin
    • R
    • CAD/CAM
    • Customer Optimization
    • Development of communication systems
    • Microsoft Azure
    • Perfect code
    • Atlassian
    • Visual Studio
    • NoSQL
    • Yii
    • Mono и Moonlight
    • Parallel Programming
    • Asterisk
    • Yandex API
    • WordPress
    • Sports programming
    • Lua
    • Microsoft SQL Server
    • Payment systems
    • TypeScript
    • Scala
    • Google API
    • Development of data transmission systems
    • XML
    • Regular expressions
    • Development under Tizen
    • Swift
    • MySQL
    • Geoinformation services
    • Global Positioning Systems
    • Qt
    • Dart
    • Django
    • Development for Office 365
    • Erlang/OTP
    • GPGPU
    • Eclipse
    • Maps API
    • Testing games
    • Browser Extensions
    • 1C-Bitrix
    • Development under e-commerce
    • Xamarin
    • Xcode
    • Development under Windows Phone
    • Semantics
    • CMS
    • VueJS
    • GitHub
    • Open data
    • Sphinx
    • Ruby on Rails
    • Ruby
    • Symfony
    • Drupal
    • Messaging Systems
    • CTF
    • SaaS / S+S
    • SharePoint
    • jQuery
    • Puppet
    • Firefox
    • Elm
    • MODX
    • Billing systems
    • Graphical shells
    • Kodobred
    • MongoDB
    • SCADA
    • Hadoop
    • Gradle
    • Clojure
    • F#
    • CoffeeScript
    • Matlab
    • Phalcon
    • Development under Sailfish OS
    • Magento
    • Elixir/Phoenix
    • Microsoft Edge
    • Layout of letters
    • Development for OS X
    • Forth
    • Smalltalk
    • Julia
    • Laravel
    • WebGL
    • Meteor.JS
    • Firebird/Interbase
    • SQLite
    • D
    • Mesh-networks
    • I2P
    • Derby.js
    • Emacs
    • Development under Bada
    • Mercurial
    • UML Design
    • Objective C
    • Fortran
    • Cocoa
    • Cobol
    • Apache Flex
    • Action Script
    • Joomla
    • IIS
    • Twitter API
    • Vkontakte API
    • Facebook API
    • Microsoft Access
    • PDF
    • Prolog
    • GTK+
    • LabVIEW
    • Brainfuck
    • Cubrid
    • Canvas
    • Doctrine ORM
    • Google App Engine
    • Twisted
    • XSLT
    • TDD
    • Small Basic
    • Kohana
    • Development for Java ME
    • LiveStreet
    • MooTools
    • Adobe Flash
    • GreaseMonkey
    • INFOLUST
    • Groovy & Grails
    • Lisp
    • Delphi
    • Zend Framework
    • ExtJS / Sencha Library
    • Internet Explorer
    • CodeIgniter
    • Silverlight
    • Google Web Toolkit
    • CakePHP
    • Safari
    • Opera
    • Microformats
    • Ajax
    • VIM
  • Administration
    • System administration
    • IT Infrastructure
    • *nix
    • Network technologies
    • DevOps
    • Server Administration
    • Cloud computing
    • Configuring Linux
    • Wireless technologies
    • Virtualization
    • Hosting
    • Data storage
    • Decentralized networks
    • Database Administration
    • Data Warehousing
    • Communication standards
    • PowerShell
    • Backup
    • Cisco
    • Nginx
    • Antivirus protection
    • DNS
    • Server Optimization
    • Data recovery
    • Apache
    • Spam and antispam
    • Data Compression
    • SAN
    • IPv6
    • Fidonet
    • IPTV
    • Shells
    • Administering domain names
  • Design
    • Interfaces
    • Web design
    • Working with sound
    • Usability
    • Graphic design
    • Design Games
    • Mobile App Design
    • Working with 3D-graphics
    • Typography
    • Working with video
    • Work with vector graphics
    • Accessibility
    • Prototyping
    • CGI (graphics)
    • Computer Animation
    • Working with icons
  • Control
    • Careers in the IT industry
    • Project management
    • Development Management
    • Personnel Management
    • Product Management
    • Start-up development
    • Managing the community
    • Service Desk
    • GTD
    • IT Terminology
    • Agile
    • Business Models
    • Legislation and IT-business
    • Sales management
    • CRM-systems
    • Product localization
    • ECM / EDS
    • Freelance
    • Venture investments
    • ERP-systems
    • Help Desk Software
    • Media management
    • Patenting
    • E-commerce management
    • Creative Commons
  • Marketing
    • Conferences
    • Promotion of games
    • Internet Marketing
    • Search Engine Optimization
    • Web Analytics
    • Monetize Web services
    • Content marketing
    • Monetization of IT systems
    • Monetize mobile apps
    • Mobile App Analytics
    • Growth Hacking
    • Branding
    • Monetize Games
    • Display ads
    • Contextual advertising
    • Increase Conversion Rate
  • Sundry
    • Reading room
    • Educational process in IT
    • Research and forecasts in IT
    • Finance in IT
    • Hakatonas
    • IT emigration
    • Education abroad
    • Lumber room
    • I'm on my way

Flutter for Android developers. How to create a UI for Activity using Flutter

Flutter for Android developers. How to create a UI for Activity using Flutter
 
This article is written for Android developers who want to apply their existing knowledge to create mobile applications using Flutter. In this article, we'll look at the equivalent of Activity in Flutter.
do it .
 
Dart is based on the concept of OOP, so Android-developers can easily begin to use it.
 
Objective
 
At the end of the article, we will be able to create a user interface for Activity using Flutter widgets, which will look like this:
 

 
In general, if you look inside the Android project generated with Flutter and open the file AndroidMenifest.xml , you will find that there is only one Activity there, for example, FlutterActivity . But in this article, we will focus on designing a user interface for Activity in Flutter. How? With the help of scaffold (English ? scaffolding ).
 

Scaffold


 

Scaffold is a set of widgets that visually represent the user interface for Activity. Typically, Activity is used to display one screen, which consists of many View-components, such as toolbar, menu, sidebar, snack bar, FAB, etc. A FrameLayout It is used as a container for fragments in the Activity. In scaffold, all this is represented in the form of widgets.


 
Remember, any component in Flutter is widget .


 

The image above clearly demonstrates the components of scaffold, which provides an API for displaying sidebar, bottom panel, toolbar, content area.


 

Because scaffold is a material widget, it must be inherited from some other material-components, but we'll discuss it in more detail in other articles. Now we will focus on creating a scaffold-widget.


 
    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
? home: new Scaffold (
),
));

 

When you run this code, you will see a white blank screen, because you have not added anything to the scaffold yet. So let's define the background color with the property backgroundColor and set the color to yellow:


 
    void main () => runApp (new MaterialApp (
? home: new Scaffold (
? backgroundColor: Colors.yellowAccent,
),
));

 

Now you will see the fully yellow screen of your application. You can play around with other scaffold properties, a full list of which you can find in official documentation .


 

Now we know how to create a scaffold. Let's explore its main properties one by one.


 

1. AppBar (Toolbar)


 

AppBar is essentially the same as Toolbar , which we use in our Activity. The picture shows where is displayed. the AppBar property. .


 


 
  •  
  • leading : The widget that appears before the header. It can be a hamburger menu icon or a back button.


     
     
  • title : the title of the toolbar, wrapped in the widget Text .


     
     
  • actions : this is the equivalent of menu.xml , in which we create the set to display menu items. The actions property takes a list of widgets to display in the menu. Usually these widgets are represented as IconButtons , which are equivalent to .


     
     
  • bottom : Usually used for TabBar , located under the AppBar.


     
     
  • flexibleSpace : this widget is used to create the effect CollapsingToolbarLayout (collapsing toolbar).


     
     

 

So, you can create a simple Appbar with an icon, title and menu:


 
    import 'package: flutter /material.dart';
void main () = newApBar (
? leading: new Icon (Icons.menu),
) title: new Text ("My Title"),
actions: .[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
),
));

 


 

This is the result. It looks exactly like the usual toolbar, which we usually use. You can experiment with adding or removing widgets, adding a style or color to a specific widget.


 

As a practical exercise, you can study the rest of the AppBar's properties and work with them.


 

2. Body (container for any View-component)


 

This is the main component of the scaffold. It works just like the Fragment Container on Android. A widget is required to display in the container area. This is the area where we display the main content to the user. In our example, for simplicity, we'll add a red color to the body. In real life, in addition to the background color, many other widgets are used, for example, ListView, Row, Column, Stack, etc.


 
    import 'package: flutter /material.dart';
void main () = newApBar (
? leading: new Icon (Icons.menu),
) title: new Text ("My Title"),
Actions: .[
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
Body: new Container (
.colors.red,
),
),
));

 


 

The body is displayed behind AppBar, FAB and the side menu. Despite the fact that we applied the yellow background to the scaffold, the screen displays a red body color that overlaps the scaffold background.


 

3. Drawer (DrawerLayout)


 

This widget is DrawerLayout in Android, which leaves the left side of Activity to display the navigation links of the application.


 


 

Drawer is usually used with the property Scaffold.drawer . As in Android, we use NavigationView inside DrawerLayout . The table below shows equivalent View components in Android and Flutter.


 


 

The child component of the Drawer widget is usually ListView whose first element is DrawerHeader , which displays information about the current user. The rest of the list items are usually created using ListTiles . The following code shows how Drawer is created:


 
    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
) home: new Scaffold (
.clearColor: Colors.yellowAccent,
.appBar: new AppBar (
.title: new Text ("My Title"),
actions: [
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
, Drawer: new Drawer (
, Child: new ListView (
, Children: .[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
),
));

 


 

That's the result you should get. It's worth noting that when you add a Drawer widget to the scaffold in AppBar, the hamburger menu icon is automatically added, so all other icons should be removed.


 

For more information about this widget, see practical example from the documentation or devoted to this topic separate article .


 

4. BottomNavigationBar (BottomNavigationView)


 

The material widget displayed at the bottom of the application, BottomNavigationBar consists of several elements in the form of text and icons.


 

BottomNavigationBar is usually applied using the Scaffold.bottomNavigationBar property.


 

In Android, you define menu items in BottomNavigationView with the property app: menu = "@ menu /my_navigation_items" , where my_navigation_items Is a list of all menu items in the tag . Flutter uses the property items , which takes as an argument the list BottomNavigationBarItem , each of which consists of an icon, title and background color in the menu.


 
    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
? home: new Scaffold (
? backgroundColor: Colors.yellowAccent,
? appBar: ,
) body: ,
drawer: ,
BottomNavigationBar: new BottomNavigationBar (items:[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Search"),
)
]),
),
));

 


 

Now we have a BottomNavigationBar with two menu items.


 

To process a click and change content in scaffold, you need a widget that supports state preservation and some manual work. This topic is beyond the scope of this article, but you can read about it in official documentation .


 

Also, let's add FAB to the scaffold. Below is the complete code for creating our Activity UI with scaffold.


 
    import 'package: flutter /material.dart';
void main () => runApp (new MaterialApp (
) home: new Scaffold (
.clearColor: Colors.yellowAccent,
.appBar: new AppBar (
.title: new Text ("My Title"),
actions: [
new IconButton(
icon: new Icon(Icons.shopping_cart),
onPressed: () {},
),
new IconButton(
icon: new Icon(Icons.monetization_on),
onPressed: () {},
)
],
),
body: new Container (
colors.red,
),
Drawer: new Drawer (
Child: new ListView (
, Children: .[
new DrawerHeader(
child: new Text("Drawer Header"),
decoration: new BoxDecoration(
color: Colors.blue,
),
),
new Text("Item 1"),
new Text("Item 2"),
new Text("Item 3"),
new Text("Item 4"),
new Text("Item 5"),
new Text("Item 6"),
],
),
),
BottomNavigationBar: new BottomNavigationBar (items:[
new BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text("Home"),
),
new BottomNavigationBarItem(
icon: new Icon(Icons.search),
title: new Text("Search"),
)
]),
FloatingActionButton: new FloatingActionButton (
OnPressed: () {},
    child: new Icon (Icons.add),
),
),
));

 


 

Now the FAB method is onPressed indefined. Therefore, the button will not respond to touch. If necessary, you can add processing for this event.
 
Finally, we obtained the result, which was discussed at the beginning of this article.
 
Conclusion
 
Flutter is a powerful tool for fast development of a quality, beautiful user interface. It provides many widgets to create a flexible interface with attractive animations. Scaffold - one of them, and this is just the tip of the iceberg. In the following articles, consider other topics.

It may be interesting

  • Comments
  • About article
  • Similar news
Guillaume Lemelin 14 March 2019 20:28
Such an unusual point of view. I would also be interested in knowing your opinion about http://casinosninja.blog.fc2.com/blog-entry-1.html so don't hesitate to share your thoughts on the topic of online gambling.

weber

Author

27-09-2018, 17:15

Publication Date

Development of mobile applications / Programming

Category
  • Comments: 1
  • Views: 584
Flutter 1.0 - December 4 release
About Flutter, briefly: Basics
MVVM architecture in mobile
Do applications on Flutter dream about
Fast prototypes for Flutter and Kotlin
Flutter.io to bury or burn?
Write a comment
Name:*
E-Mail:


Comments
Global Dezigns is a Website Development Company in Karachi, Providing services of
website design in karachi
. We are delivering the best partnership across Pakistan. provides a complete range of web development services including web applications, website hosting and maintenance, domain registration, on-page search engine optimization, and website integration with social media platforms such as Facebook, Twitter, LinkedIn, Google Maps, and Google Local Directory. We believe we are well placed to take our knowledge and expertise to the logical next level with the latest web standards.  
  Show/hide text
https://www.globaldezigns.com/



Yesterday, 22:45

mike tomlin

This blog is really great. The information here will surely be of some help to me. Thanks!.mastering physics

Yesterday, 17:57

raymond weber

Coinyspace is the cryptocurrency community and trading forum where members can find any contributors of crypto ecosystem like currencies, exchanges & merchants. Check Out: Bitcoin Merchants
Yesterday, 16:57

noorseo

This is a great high resolution screen which you have shared for the users. Making a website is not an easy task but managing a good website is really a hard work. As far as this website is concerned, I am very happy.https://19216801.1
Yesterday, 16:01

nushra45

i'm satisfied to deem this make recognized Very beneficial for me, as it contains lot of advice. I usually favor to buttonhole The excellent and glad i found this count number in you assertion. thanks Subliminal Hypnosis
Yesterday, 14:56

jahangirkhatri

Adv
Website for web developers. New scripts, best ideas, programming tips. How to write a script for you here, we have a lot of information about various programming languages. You are a webmaster or a beginner programmer, it does not matter, useful articles will help to make your favorite business faster.

Login

Registration Forgot password