How can I make a mobile app using flutter?

Want some opinions on How can I make a mobile app using flutter?

First of all, make sure you have Android Studio version 3.0+. Do you have one? Great, now you need to install Flutter plugin;

  1. Start Android Studio.
  2. Open plugin preferences ( Preferences>Plugins on macOS, File>Settings>Plugins on Windows & Linux).
  3. Select Browse repositories… , select the Flutter plug-in and click install.
  4. Click Yes when prompted to install the Dart plugin.
  5. Click Restart when prompted.

Now you can create a new project for Flutter: File> New> New Flutter Project.

Choose Flutter application.
Select a name for your project and enter a path to your SDK. If SDK is not specified, just click on “Install SDK.”
Choose the package name and add a support for Swift and Kotlin (if necessary). Basically, that’s all you need to start working with a project. Additionally, you can run a default code generated with Flutter (please, don’t forget to run an emulator or connect your device).

Let’s write “Hello world” app:

import ‘package:flutter/material.dart’;

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Welcome to Flutter’,
home: new Scaffold(
appBar: new AppBar(
title: new Text(‘Welcome to Flutter’),
),
body: new Center(
child: new Text(‘Hello World’),
),
),
);
}
}

And now let’s take a look at the syntaxis peculiarities.

  • In this example, we use Material style as we work in Android Studio. Flutter provides various ready design widgets. For the iOS platform will be available Coopertino style.
  • => This symbol is just a syntaxis for one line functions.
  • In Flutter everything is a widget (even an application itself). Stateless and Stateful widgets are the widgets with changeable and unchangeable conditions.
  • The Scaffold widget is a framework that includes the standard screen components. Hierarchy can be quite a difficult process. and have an app bar, body, menu and other.
  • The main method for the widget will be build() — that’s how the widget should look like.
  • The widget should contain other widgets.
  • State less widgets are immutable. This means that their properties can’t be changed. All the values are unchangeable.
  • State ful widgets maintain state that might be changed during the lifetime of the widget. Implementing a stateful widget requires at least two classes: 1) a StatefulWidget class that creates an instance of 2) a State class. The StatefulWidget class is, itself, immutable, but the State class persists over the lifetime of the widget.

Basically, you need to create a Widget and generate a condition for this widget (build it according to the state).

For education purposes, let’s create a dependency in a file pubspec.yaml. This library has the most common English words.

dependencies:
flutter:
sdk: flutter

cupertino_icons: ^0.1.0
english_words: ^3.1.0

Let’s click on the “package get” to pull in a dependency. We’ll create a widget that A widget that changes its state, we’ll create by hiring from the base class.

class RandomWords extends StatefulWidget {
@override
createState() => new RandomWordsState();
}
Besides, we create a condition by inheriting from the base class of condition:
сlass RandomWordsState extends State {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}
We need to redefine a method createState() and return an object condition. Condition class has a builder method, which you need to redefine if you want to configure your widget. This is how a method builder of your main class of the application should look like:
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: ‘Welcome to Flutter’,
home: new Scaffold(
appBar: new AppBar(
title: new Text(‘Welcome to Flutter’),
),
body: new Center(
child: new RandomWords()),
),
);
}
}
Let’s create a list of the most common words and add a possibility to mark the words that we liked the most and drag them on the new screen. Basically, all the logic will be in the condition class. The following code needs to be considered as as a single class with comments:

class RandomWordsState extends State {
// variables
final _suggestions = [];
final _saved = new Set();
final _biggerFont = const TextStyle(fontSize: 18.0);

// Routing method - new page
void _pushSaved() {
Navigator.of(context).push(
new MaterialPageRoute(
builder: (context) {
final tiles = _saved.map(
(pair) {
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
);
},
);
final divided = ListTile
.divideTiles(
context: context,
tiles: tiles,
)
.toList();
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Saved Suggestions’),
),
body: new ListView(children: divided),
);
},
),
);
}
//List View Widget
Widget _buildSuggestions() {
return new ListView.builder(
padding: const EdgeInsets.all(16.0),
// The itemBuilder callback is called once per suggested word pairing,
// and places each suggestion into a ListTile row.
// For even rows, the function adds a ListTile row for the word pairing.
// For odd rows, the function adds a Divider widget to visually
// separate the entries. Note that the divider may be difficult
// to see on smaller devices.
itemBuilder: (context, i) {
// Add a one-pixel-high divider widget before each row in theListView.
if (i.isOdd) return new Divider();
// The syntax “i ~/ 2” divides i by 2 and returns an integer result.
// For example: 1, 2, 3, 4, 5 becomes 0, 1, 1, 2, 2.
// This calculates the actual number of word pairings in the ListView,
// minus the divider widgets.
final index = i ~/ 2;
// If you’ve reached the end of the available word pairings…
if (index >= _suggestions.length) {
// …then generate 10 more and add them to the suggestions list.
_suggestions.addAll(generateWordPairs().take(10));
}
return _buildRow(_suggestions[index]);
});
}

//Item widget with toggle logic
Widget _buildRow(WordPair pair) {
final alreadySaved = _saved.contains(pair);
return new ListTile(
title: new Text(
pair.asPascalCase,
style: _biggerFont,
),
trailing: new Icon(
alreadySaved ? Icons.favorite : Icons.favorite_border,
color: alreadySaved ? Colors.red : null,
),
onTap: () {
setState(() {
if (alreadySaved) {
_saved.remove(pair);
} else {
_saved.add(pair);
}
});
},
);
}

@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(‘Startup Name Generator’),
actions: [
new IconButton(icon: new Icon(Icons.list), onPressed: _pushSaved),
],
),
body: _buildSuggestions(),
);
}
}
As a result, we can select the important elements and go on the new screen.

1 Like

Flutter is a cross-platform framework from Google and released in May 2017. It can be used to develop applications for mobile, desktop, and web platforms.

=> There are many ways to make a mobile app using Flutter.
Here, some basic steps to create a mobile app using flutter.

Step 1: Create the starter Flutter app
Step 2: Use an external package
Step 3: Add a Stateful widget
Step 4: Create an infinite scrolling ListView

There are many online developer communities available such as Github, StackOverflow, StackExchange, etc. Apart from that, If you want to develop a high-functionality mobile application via Flutter, you must contact the professional mobile app development company or hire Flutter app developers.