|
☎ 18001237177 |
Login
Flutter is an open-source software development kit made by google which is employed to create a mobile app for both android and ios. Flutter uses Dart an object-oriented programming language which is in itself simple to learn.
In this mobile app development project, you will build a mobile application that will create an infinite, lazily loaded list of random words. By working on this project you will practically learn about:
Looking to build project on Mobile App development using Flutter?:
Skyfi Labs gives you the easiest way to learn and build this project.
Want to develop practical skills on Mobile App Development? Checkout our latest projects and start learning for free
Advantages of Flutter
Project Implementation
1. Install the latest version of Android Studio and Now add flutter plugin.
2. Goto File>settings>plugins. In Browse, repositories select Flutter plug-in and install
3. It will prompt to install dart plugin, Click yes and install dart.
4. Start by creating a new project for flutter File>New>New Flutter project
5. Put a name to your project and mention a path for the SDK and click on Install SDK
6. Select the package name and If necessary add support for Swift and Kotlin. This is the basic things required to start working on a project.
7. Let’s start by creating a simple flutter app which says “Hello world”. Use the following code to make the app:
“import 'package: flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: const Text('Welcome to Flutter'),
),
body: const Center(
child: const Text('Hello World'),
),
),
);
}
}”
8. Type the required code and run it which forms a Material app.
9. (=>) notion used for one-line functions
10. Now it extends StatelessWidget by making the whole app as a widget. In flutter, everything is a widget including, layout, alignment and padding.
11. Scaffold widget gives a body property which contains the widget tree, a default app bar and a title for the home screen.
12. Centre widget aligns the widget subtree to the centre of the screen.
13. Use an external package english_words to add some English words
14. Let’s add a stateful widget - it is an immutable widget, their properties cannot change.
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final WordPair wordPair = WordPair.random(); // Delete this line.
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: Center(
//child: Text(wordPair.asPascalCase), // Change this line to...
child: RandomWords(), // ... this line.
),
),
);
}
}
15. After adding StatefulWidget and RandomWords creates a State class - RandomWordsState.
16. Now add the build() method to RandomWordsState.
17. Create an infinite scrolling ListView by expanding the RandomWordsState. The list will grow infinitely, If the user scrolls. ListView from builder factory constructor lets you create a lazily load list view.
Did you know
Skyfi Labs helps students learn practical skills by building real-world projects.
You can enrol with friends and receive kits at your doorstep
You can learn from experts, build working projects, showcase skills to the world and grab the best jobs.
Get started today!
Join 250,000+ students from 36+ countries & develop practical skills by building projects
Get kits shipped in 24 hours. Build using online tutorials.
Stay up-to-date and build projects on latest technologies