🎴Layout, ⚡ Hot Reload in Flutter!!!
Creation of own layout in our app using a Flutter framework!!
import 'package:flutter/material.dart';
import 'ui/home.dart';
main() {
runApp(MyApp());
}
//following code is for hot reload class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return app1();
}
}
For changing status bar color just add code in pubspec.yaml file and then save it after saving run cmd flutter pub get and automatically install the library.
fluttertoast: ^7.0.1
flutter_statusbarcolor: ^0.2.3
Flutter toast is useful for interactive nature also responds after a click.
Now for addition, the status bar uses the following line of code in dart file.
FlutterStatusbarcolor.setStatusBarColor(Colors.amber.shade600);
It will change status bar color to amber and .shade gives different shades here.
Fluttertoast.showToast(
msg: "I am Vishnu !!",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.BOTTOM,
timeInSecForIosWeb: 1,
backgroundColor: Colors.amber,
textColor: Colors.white,
fontSize: 16.0);
Here is the flutter toast function which gives the following type of response.
For removing debug bar label needs to add the following line of code in material app function
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Profile'),
backgroundColor: Colors.yellow.shade700,
actions: <Widget>[
IconButton(icon: Icon(Icons.add_a_photo), onPressed: myt),
IconButton(icon: Icon(Icons.account_circle), onPressed: null)
],
),
body: mainbody,
),
);
}
Now in the main body for all body layout for margin, for adding colors, for texts and for adding images in our app use following lines of code also search on google there is flutter documentary available online helpful in adding various functions and layouts.
var mainbody = Container(
alignment: Alignment.center,
width: double.infinity,
height: double.infinity,
color: Colors.white,
margin: EdgeInsets.all(30),
child: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(30),
border: Border.all(
color: Colors.black12,
width: 3,
),
),
margin: EdgeInsets.all(50),
alignment: Alignment.center,
width: 350,
height: 200,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Vishnu Parikh',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.email),
Text('vishnuparikh@gmail.com'),
],
),
],
),
);
Now for gesture effect, there is a function called GestureDetector() useful for tapping effect like double-tap, single tap, and many more as shown in flutter documentation.
GestureDetector(
// onTap: myprint,
onDoubleTap: myprint,
child: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://raw.githubusercontent.com/vishnuparikh/myfirstapp/master/yellow.jpg'),
fit: BoxFit.cover,
),
color: Colors.amber,
borderRadius: BorderRadius.circular(50),
border: Border.all(
color: Colors.amber,
width: 3,
),
),
// margin: EdgeInsets.all(20),
width: 100,
height: 100,
// color: Colors.blue,
// child: Text('second'),
),
),
],
));
Here I used the onDoubleTap function and call myprint variable which I already created.
myprint() {
print('Vishnu Parikh!! ');
}
With the help of GestureDetector() function when we tap on images on the app then it shows the above massage.
You can see a message like that in debug console after taping on profile pic.
And that's all our small profile app is created
here is the final app display as follows:
Github link for reference:- https://github.com/vishnuparikh/myfirstapp.git
For further doubts ping me and also give some suggestions to me.
Thanks to Vimal sir for such a nice lecture.
Thank you so much !!!!!
This was a great read! Human resources play a significant role in accomplishing the objectives of the company's goal. I agree that hiring good experts for technology-based projects like mobile app development, flutter app development, etc., needs experts. I also followed the same and Hire flutter developer via a freelance platform named Eiliana.com, which is a great decision.
ReplyDelete