Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
Features of Flutter
3.
Working of Flutter
3.1.
Dart
3.2.
Widgets
3.3.
Engines
4.
Flutter: Platform Specific Features ( iOS)
4.1.
Views
4.2.
Animating a Widget in iOS
4.3.
Navigation
4.4.
Making a Network Request
4.5.
Event Handling
4.6.
Form Input 
4.7.
Databases and Local Storage 
4.8.
Debugging 
4.9.
Notification Settings
5.
Frequently Asked Questions
5.1.
How are flutter and dart related?
5.2.
Why is Flutter better than React Native? 
5.3.
What are the best editors for Flutter Development?
5.4.
What is pubspec.yaml file? 
5.5.
Name some popular Apps that use Flutter.
6.
Conclusion
Last Updated: Mar 27, 2024

Flutter iOS Specific Features

Author Geetika Dua
0 upvote
Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

Introduction

Flutter is an open-source mobile framework that Google introduced. It is pretty convenient to develop using Flutter as it allows the user to create two different apps, an android application, and an ios application, with just one codebase.

Back in the day, developers needed to rely on Objective C language. It was not a widely accepted language, but no other alternative was available.

With the advent of swift, the situation improved as it was a type-safe language and worked well with the Application Programming Interfaces that already existed in ios.

intro image

Features of Flutter

  • Cross-Platform Development: Before Flutter became popular, Android apps depended on Java and Kotlin, while iOS came under Swift or Objective C. With flutter being in demand, it can carry out development in both operating systems. It allows sharing the same codebase and smoothens the development process. Flutter's flexible design allows easy interaction with the Application Programming Interfaces(API).
  • Open Source: Flutter is an open source platform that means anybody can access, modify and make changes for improvement purposes. So, the flutter community always comes to the rescue whenever the developers get stuck somewhere.
  • Widget Library: Whatever we see on the screen, be it any element, a text box, or an image, is a widget. All of the user interfaces of Flutter revolve around the widgets.
  • Hot Reload: It means that the changes made in the code are reflected instantly, thereby reducing the chances of undesired products or errors.

 For more detailed information, you can refer here.

Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Working of Flutter

flowchart

Dart

Dart is an object-oriented programming language made open source by google in 2011. The developments in Dart since then have been immense. It does not require a middleware bridge for parsing the data and execution like javascript. That is why the demand for Dart has increased ever since.

Widgets

Most of the UI of Flutter is highly dependent on widgets. Several widgets are used in the Flutter Programming Language. Some of the basic widgets are as follows:

  • Text: It is one of the essential widgets in Flutter to add text. Further customization on the text can be done using font, textAlign, color, etc.
new Text(     
'Welcome to Coding Ninjas’,     
textAlign: TextAlign.left,  )  

 

  • Image: This widget introduces images to your application’s user interface.
    For inserting an image, it first needs to be saved in the assets folder, and then add the following code in your dart file.
image.asset('assets/coding-ninjas.png')  

 

  • Icon: The widget acts as a container for adding icons in Flutter. We can insert the icon in the following way.
 new Icon(  
  Icons.add,  
  size: 30,  )

Many widgets are available in Flutter, like Rows, columns, center, padding, Stack, and Scaffold.

Points to be noted: Remember to set your user-material-design: true in your dart file. It gives easy access to the material icons.

Engines

Flutter Engine is a run-time environment. By runtime environment, we mean the environment in which programs are executed. The fundamental libraries of Flutter are implemented, including those for animation and graphics, file and network I/O, accessibility support, plugin architecture, 

Flutter: Platform Specific Features ( iOS)

platform specific feature

Views

In iOS, most screen parts visible to the user are widget driven. Several widgets are supported in Flutter, like text, row, column, stack, scaffold, icon, image, etc.

Widgets can not be changed in iOS. In technical terms, they are immutable. However, if you intend to change the view, this can be done using StatefulWidgets and StatelessWidgets.

Following is the example of a code to give an idea of basic syntax.

class CodingNinjas extends StatefulWidget {
  
  State<StatefulWidget> createState() {
    return _CodingNinjas();
  }
}


class _CodingNinjas extends State<CodingNinjas> {
  
  Widget build(BuildContext context) {
    return Container(color: const Color(Green));
  }
}

Animating a Widget in iOS

Animations enhance the user experience and make the applications highly impressive. In order to add animations, flutter provides a simple way to do it using dependencies.

All we need to do is add the “animate_do” dependency in the pubspec.yaml file. This dependency can be installed by running the pub and saving it afterward.

After importing the dependency, the user is free to add animations like fadeIn, fadeOut, bounceIn, FlipIn, etc.

class CodingNinjas extends StatelessWidget {
Widget build(BuildContext context) {
return Container(height: 6, width: 6, color: Colors.red);
	}
}
BounceInUp(child: CodingNinjas(), duration: Duration(seconds: 2)),
BounceInDown(child: CodingNinjas(), duration: Duration(seconds: 2)),
FadeInUp(child: CodingNinjas(), duration: Duration(seconds: 2)),
FadeInDown(child: CodingNinjas(), duration: Duration(seconds: 2))

Navigation

Navigation and routing work in Flutter is done by the push() and the pop() operation of the navigator tool. This procedure is done by creating two different routes and then using a navigator. push() and navigator. pop().

These two operations are similar to the stack operations push and pop.

Navigator.of(context).pop({'lat': 43.821757, 'long': -79.226392});

You can pop back to the first route by using SystemNavigator.pop().

Making a Network Request

For any application, Just an excellent Graphical User interface does not do the complete job. It must have connections to the server as well.

To make a network request in Flutter, you must add HTTP dependency in the dependencies folder of the pubspec.yaml.

For establishing a network connection, the await method on the async function HTTP. get().

The code for the above activity is :

Future<void> loadData() async {
  final U dataURL = Uri.parse('https://codingninjas/posts');
  final http.Response response = await http.get(dataURL);
  setState(() {
    data = jsonDecode(response.body);
  });
}

Event Handling

Interactive applications are in high demand in the market. Users can achieve this interaction feature in Flutter by Gesture and Event handling.

For any widget that may or may not support event handling, there are ways to do so.

  • If a widget allows event handling :
Widget build(BuildContext context) {
  return ElevatedButton(
    onPressed: () {
      developer.log('click');
    },
    child: const Text('Button'),
  );
}
  • If a widget does not allow event handling, simply encapsulate the widget in GestureDetector.
class SampleCodingNinjas extends StatelessWidget {
  const SampleCodingNinjas({super.key});


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: GestureDetector(
          onTap: () {
            developer.log('tap');
          },
          child: const CNLogo(
            size: 200.0,
          ),
        ),
      ),
    );
  }
}

Form Input 

Although the widgets in Flutter are immutable, it is possible to take user inputs using TexEditingtController() in Flutter. If you already have designed fields like TextField, you can apply this method to obtain input from the user.

final myController = TextEditingController();

Bind it to the text field

return TextField(
  controller: myController,
)

Display the text

 content: Text(myController.text),

Databases and Local Storage 

The storage of data is vital for many functionalities in an application. Flutter supports two types of database connections: sqflite and Firebase.

The development kit of flutter does not directly allow to connect to SQLite; instead, it does so by providing a plugin named sqflite.

Firebase database, on the other hand, provides cloud storage access to the user.

Debugging 

DevTools are a suite for implementing the debugging process in Flutter and Dart Applications.

DevTools support numerous things

  • Inspect the UI layout and state of a Flutter app.
  • Network issues for a Flutter app.
  • Source-level debugging of a Flutter 
  • Debug memory issues in a Flutter 
  • Analyze code and app size.

Notification Settings

The functionality of receiving Push Notifications can be achieved by using the plugin named firebase_messaging.

Frequently Asked Questions

How are flutter and dart related?

The flutter community is the superset of the Dart Community.

Why is Flutter better than React Native? 

React’s architecture is based on Native elements, so problems may arise whenever there’s an update, which is not the case in Flutter Apps.

What are the best editors for Flutter Development?

The best editors for the development of Flutter are Visual Studio Code and Android Studio.

What is pubspec.yaml file? 

It is a file generated at the top of the project tree whenever we start a flutter project.

Name some popular Apps that use Flutter.

Google Ads, KlasterMe, and Reflectly are some of the popular Apps that use Flutter.

Conclusion

Flutter is a cross-platform framework that is widely accepted by developers all over the world owing to its comprehensive features. The flutter community has a solid open source network, and the Flutter apps are becoming widely popular today because of the use of a single codebase for Android and iOS.

Refer to our guided paths on Coding Ninjas Studio to learn more about DSA, Competitive Programming, JavaScript, System Design, etc. Enroll in our courses and refer to the mock test and problems available. Take a look at the interview experiences and interview bundle for placement preparations.

Happy Coding!

Live masterclass