Flutter is a cross-platform UI toolkit that is used to build natively compiled mobile applications for mobile, web, and desktop platforms. In this tutorial, we’ll walk you through the steps to build a simple mobile application using Flutter.
Getting Started with Flutter
To get started with Flutter, you’ll first need to download and install it. Flutter works with Windows, Mac, and Linux operating systems. You’ll also need to install an integrated development environment (IDE), such as Android Studio, Visual Studio Code, or IntelliJ IDEA.
Once you’ve installed Flutter and the required tools, you can create a new Flutter project using the following command:
flutter create my_project
This command will create a new directory called my_project that contains a basic Flutter starter project. You can then open this project in your IDE and start building your mobile app.
Building the User Interface
Now that we have our Flutter project set up, let’s get started on building the user interface for our mobile app. Flutter uses a reactive programming model, which means that it makes it easy to create UI elements that dynamically update based on the state of your application.
Flutter provides a wide range of material design widgets, including buttons, text fields, and icons. You can use these widgets to build your user interface. To add a widget to your app, simply create a new instance of the widget, and then add it to your app’s widget tree.
For example, let’s say you want to add a button to your app. You could do so like this:
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: ElevatedButton(
child: Text('Click Me'),
onPressed: () {
// Do something when the button is pressed
},
),
),
),
);
}
}
In this example, we’ve used the ElevatedButton widget to create a button with the text “Click Me”. We’ve added an onPressed callback to the button, which will be called when the button is pressed.
We’ve wrapped the button in a Center widget, which will center it on the screen. We’ve also added an AppBar widget to create a navigation bar at the top of the screen.
Handling User Input
In addition to creating UI elements, Flutter makes it easy to handle user input. You can use the GestureDetector widget to detect gestures such as taps and swipes.
For example, let’s say you want to create a text field that allows the user to enter their name. You could do so like this:
import 'package:flutter/material.dart';
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
String _name;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
home: Scaffold(
appBar: AppBar(
title: Text('My App'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Enter your name:'),
TextField(
onChanged: (value) {
setState(() {
_name = value;
});
},
),
Text('Hello, $_name!'),
],
),
),
),
);
}
}
In this example, we’ve created a text field using the TextField widget. We’ve added an onChanged callback to the text field, which will be called whenever the user types in the text field. In the callback, we set the value of _name to the current value of the text field.
We’ve also added a Text widget that displays “Hello, $_name!”. The $_name syntax is used to interpolate the value of _name into the string.
Adding Navigation
To create a mobile app with multiple screens, you’ll need to use navigation. Flutter provides a range of navigation widgets, including Navigator, MaterialApp, and PageRoute.
For example, let’s say you want to create a login screen that leads to the main screen of your app. You could do so like this:
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'My App',
initialRoute: '/',
routes: {
'/': (context) => LoginPage(),
'/main': (context) => MainScreen(),
},
);
}
}
class LoginPage extends StatelessWidget {
final TextEditingController _usernameController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
void _login(BuildContext context) {
// Add login logic here
Navigator.pushNamed(context, '/main');
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextField(
controller: _usernameController,
decoration: InputDecoration(
labelText: 'Username',
),
),
TextField(
obscureText: true,
controller: _passwordController,
decoration: InputDecoration(
labelText: 'Password',
),
),
ElevatedButton(
child: Text('Login'),
onPressed: () => _login(context),
),
],
),
),
);
}
}
class MainScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Main Screen'),
),
body: Center(
child: Text('Welcome to the main screen!'),
),
);
}
}
In this example, we’ve created a MaterialApp widget that sets up the routes for our app. The initialRoute property specifies the route that should be displayed when the app is launched. In this case, we’ve set it to the login page.
We’ve also created two new stateless widgets, LoginPage and MainScreen. The LoginPage widget displays a username and password text field, and an “Login” button. When the user presses the “Login” button, we call the _login method, which pushes the MainScreen widget onto the navigation stack.
The MainScreen widget displays a welcome message. To navigate back to the login screen, the user can simply press the back button.
Conclusion
In this tutorial, we’ve walked you through the steps to build a simple mobile app using Flutter. We’ve covered how to build a user interface, handle user input, and add navigation. With Flutter, you can develop high-quality, natively compiled mobile apps for Android and iOS, as well as web and desktop platforms. Happy coding!