Flutter: How to specify the location of a text? - flutter

So, I'm wanting to add a text below an image of the application I'm doing. However, the text seems to be appearing beside the image, not below as per so:
I want it to appear below the image like the screenshot below:
This is my main.dart code:
import 'package:flutter/material.dart';
import 'login_page.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new LoginPage(),
theme: new ThemeData(
primarySwatch: Colors.green
)
);
}
}
And this is my login_page.dart code:
import 'package:flutter/material.dart';
class LoginPage extends StatefulWidget{
#override
State createState() => new LoginPageState();
}
class LoginPageState extends State<LoginPage>{
#override
Widget build(BuildContext context){
return new Scaffold(
appBar: AppBar(
title: new Text("SMARTID", textAlign: TextAlign.center, style: TextStyle(fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/arrowPNG.png",
scale: 8.0,
)
)
),
backgroundColor: Colors.transparent,
body: new Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/arrowPNG.png', scale: 2.5),
]
),
alignment: Alignment(0, -0.5),
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background.png'),
fit: BoxFit.cover,
)
)
)
);
}
}
How do I resolve this?

Here is your solution,
You should place Text("SMARTID")
below Image.asset
inside a Column not in a Row
class LoginState extends State<Login> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SMARTID", textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Open Sans', fontWeight: FontWeight.bold)),
leading: Padding(
padding: const EdgeInsets.all(8.0),
child: Image.asset(
"assets/images/appicon.png",
scale: 8.0,
)
)
),
backgroundColor: Colors.transparent,
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Image.asset('assets/images/appicon.png', scale: 2.5),
SizedBox(height: 20,),
Text("SMARTID", style: TextStyle(
fontSize: 30, color: Colors.white,fontFamily: 'Open Sans',
fontWeight: FontWeight.bold))
]
),
alignment: Alignment(0, -0.5),
width: MediaQuery
.of(context)
.size
.width,
height: MediaQuery
.of(context)
.size
.height,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/background.jpg'),
fit: BoxFit.cover,
)
)
)
);
}
}
Output,

Related

how to add a fullscreen image in flutter

here's my code and i want a fullscreen image with a centerd button but i won't get that result , screenshot of app in below the code
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Kings of Iran',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WelcomePage(),
);
}
}
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"),
fit: BoxFit.cover,
alignment: Alignment.center)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(
fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
)
],
),
),
);
}
}
and this is the result
How can I make this image fullscreen and button centered?
You can use Stack for display image and display button at center of the screen.
Stack : https://api.flutter.dev/flutter/widgets/Stack-class.html
Stack useful if you want to overlap several children in a simple way, for example having some text and an image, overlaid with a gradient and a button attached to the center.
Example :
class WelcomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
"Kings of Iran",
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
body: Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/back.jpg"), fit: BoxFit.cover, alignment: Alignment.center))),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 50.0,
),
Center(child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => HomePage()),
);
},
child: Text(
"Explore",
style: TextStyle(fontSize: 20.0, color: Color.fromARGB(255, 191, 211, 9)),
),
))
],
),
],
)
}
}
Just add width: MediaQuery.of(context).size.width in Container

One tap to zoom in and out

I want to create a 1 tap to zoom action in Flutter (http://flutter.dev/) framework.
"1 tap to zoom" -> in simpler words: if I tap once it zooms.
Actual Result: here
Code:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
height: 150.0,
width: 300.0,
color: Colors.transparent,
child: Container(
decoration: BoxDecoration(
color: Colors.teal,
borderRadius:
BorderRadius.all(Radius.circular(10.0))),
child: new Center(
child: new Text(
"Salut c'est français",
style: TextStyle(color: Colors.white, fontSize: 22),
textAlign: TextAlign.right,
),
)),
),
],
))));
}
}
Thanks in advance :)

Vertical centered text and right aligned to an image

I am working on a SplashScreen for my new Flutter app.
Here you have a screenshot of it:
And here you have the code for the current Scaffold:
return Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/splash/${yourList[randomIndex]}"),
fit: BoxFit.cover,
),
),
// child: [Your content here],
),
Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
decoration: new BoxDecoration(
color: const Color(0xFFFFFFFF).withOpacity(0.5),
image: DecorationImage(
image: new AssetImage('assets/images/app_icon_trans.png'),
),
),
child: Text(
"© 2020 Mov-Map version: ${_projectVersion}",
style: TextStyle(
color: Colors.red,
fontWeight: FontWeight.bold,
fontSize: 16.0),
))
],
),
);
I would like to change the layout for the second container. I would like to put the image on the left side and the text just after the image, vertically at the center of the image.
I have been searching for a solution for a couple of hours and I would appreciate your proposals.
Is this how you would like it? Use a row (I don't have your asset image, so I used a blue container instead)
Copy/paste this code into www.dartpad.dev/flutter to play with it:
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height * 0.1,
decoration:
new BoxDecoration(color: const Color(0xFFFFFFFF).withOpacity(0.5)),
child: Row(children: [
Container(
width: 40,
height: 40,
color: Colors.blue,
),
Text(
"© 2020 Mov-Map version: 1",
style: TextStyle(
color: Colors.red, fontWeight: FontWeight.bold, fontSize: 16.0),
),
]));
}
}
You can also change the Row's alignment using crossAxisAlignment and/or mainAxisAlignment if needed.

How to download network image in Flutter

I am building a simple wallpaper app with Api by watching tutorials on YouTube. But in the last stage, I can't save the image from the URL in the android simulator. Can you guys help me with how can I do this work?
import 'package:flutter/material.dart';
class ImageView extends StatefulWidget {
final String imageUrl;
ImageView({#required this.imageUrl});
#override
_ImageViewState createState() => _ImageViewState();}
class _ImageViewState extends State<ImageView> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Hero(
tag: widget.imageUrl,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.network(
widget.imageUrl,
fit: BoxFit.cover,
),
),
),
//the buttons is here
Container(
alignment: Alignment.bottomCenter,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
//wallpaper download button
GestureDetector(
onTap: () {},
child: Stack(
children: [
Container(
height: 55,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff1c1b1b).withOpacity(0.8),
borderRadius: BorderRadius.circular(30),
)),
Container(
padding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
width: MediaQuery.of(context).size.width / 2,
height: 55,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1,
),
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(colors: [
Colors.blueGrey[100],
Colors.grey[900],
])),
child: Column(
children: [
Text(
'Set Wallpaper',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
SizedBox(height: 5),
Text(
'Image wil be save in gallery',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
)
],
)),
],
),
),
SizedBox(height: 16),
//for closeing the showing wallpaper
GestureDetector(
onTap: () => Navigator.pop(context),
child: Text(
'Cancel',
style: TextStyle(
color: Colors.amber,
),
),
),
SizedBox(height: 50)
],
),
)
],
),
);
}
}
You can copy paste run full code below
Step 1: To save image to gallery, add <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> to AndroidManifest.xml
Step 2: Request permission with permission_handler
Step 3: Download file with flutter_cache_manager's DefaultCacheManager().getSingleFile(widget.imageUrl)
Step 4: Save to gallery with image_gallery_saver's ImageGallerySaver.saveFile(file.path)
Step 5: Directly set wall paper with wallpaper_manager's WallpaperManager.setWallpaperFromFile(file.path, WallpaperManager.HOME_SCREEN)
code snippet
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
print(info);
}
...
GestureDetector(
onTap: () async {
File file = await DefaultCacheManager()
.getSingleFile(widget.imageUrl);
print(file.path);
final result = await ImageGallerySaver.saveFile(file.path);
print("gallerysaver result $result");
String resultWall =
await WallpaperManager.setWallpaperFromFile(
file.path, WallpaperManager.HOME_SCREEN);
print("resultWall $resultWall");
},
working demo
full code
import 'dart:io';
import 'package:permission_handler/permission_handler.dart';
import 'package:flutter/material.dart';
import 'package:flutter_cache_manager/flutter_cache_manager.dart';
import 'package:wallpaper_manager/wallpaper_manager.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
class ImageView extends StatefulWidget {
final String imageUrl;
ImageView({#required this.imageUrl});
#override
_ImageViewState createState() => _ImageViewState();
}
class _ImageViewState extends State<ImageView> {
#override
void initState() {
super.initState();
_requestPermission();
}
_requestPermission() async {
Map<Permission, PermissionStatus> statuses = await [
Permission.storage,
].request();
final info = statuses[Permission.storage].toString();
print(info);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Hero(
tag: widget.imageUrl,
child: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Image.network(
widget.imageUrl,
fit: BoxFit.cover,
),
),
),
//the buttons is here
Container(
alignment: Alignment.bottomCenter,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
//wallpaper download button
GestureDetector(
onTap: () async {
File file = await DefaultCacheManager()
.getSingleFile(widget.imageUrl);
print(file.path);
final result = await ImageGallerySaver.saveFile(file.path);
print("gallerysaver result $result");
String resultWall =
await WallpaperManager.setWallpaperFromFile(
file.path, WallpaperManager.HOME_SCREEN);
print("resultWall $resultWall");
},
child: Stack(
children: [
Container(
height: 55,
width: MediaQuery.of(context).size.width / 2,
decoration: BoxDecoration(
color: Color(0xff1c1b1b).withOpacity(0.8),
borderRadius: BorderRadius.circular(30),
)),
Container(
padding:
EdgeInsets.symmetric(horizontal: 8, vertical: 8),
width: MediaQuery.of(context).size.width / 2,
height: 55,
decoration: BoxDecoration(
border: Border.all(
color: Colors.white,
width: 1,
),
borderRadius: BorderRadius.circular(30),
gradient: LinearGradient(colors: [
Colors.blueGrey[100],
Colors.grey[900],
])),
child: Column(
children: [
Text(
'Set Wallpaper',
style: TextStyle(
fontSize: 16,
color: Colors.white,
),
),
SizedBox(height: 5),
Text(
'Image wil be save in gallery',
style: TextStyle(
fontSize: 10,
color: Colors.white,
),
)
],
)),
],
),
),
SizedBox(height: 16),
//for closeing the showing wallpaper
GestureDetector(
onTap: () => Navigator.pop(context),
child: Text(
'Cancel',
style: TextStyle(
color: Colors.amber,
),
),
),
SizedBox(height: 50)
],
),
)
],
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ImageView(
imageUrl: "https://picsum.photos/250?image=9")),
);
},
child: Text('To set wall paper')),
])));
}
}

Flutter fade animation between page views

I'm trying to find how to fade between PageView pages.
This is my pageView:
PageView(
controller: controller,
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image4.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image2.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/image3.jpg"),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
Is it possible to implement a fade transition? I searched stack overflow but the only thing I could find was this package:
https://pub.dev/packages/transformer_page_view#-readme-tab-
The problem is that it hasn't a controller so my smoothPageIndactor wouldn't work. (https://pub.dev/packages/smooth_page_indicator)
Thanks!
You can copy paste run full code below
You can use TransformerPageView.children and TransformerPageController
TransformerPageController controller = TransformerPageController();
...
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
working demo
full code
import 'package:flutter/material.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import 'package:transformer_page_view/transformer_page_view.dart';
class ScaleAndFadeTransformer extends PageTransformer {
final double _scale;
final double _fade;
ScaleAndFadeTransformer({double fade: 0.3, double scale: 0.8})
: _fade = fade,
_scale = scale;
#override
Widget transform(Widget item, TransformInfo info) {
double position = info.position;
double scaleFactor = (1 - position.abs()) * (1 - _scale);
double fadeFactor = (1 - position.abs()) * (1 - _fade);
double opacity = _fade + fadeFactor;
double scale = _scale + scaleFactor;
return new Opacity(
opacity: opacity,
child: new Transform.scale(
scale: scale,
child: item,
),
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TransformerPageController controller = TransformerPageController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
flex: 5,
child: TransformerPageView.children(
pageController: controller,
transformer: ScaleAndFadeTransformer(),
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image:
NetworkImage('https://picsum.photos/250?image=9'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=10'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://picsum.photos/250?image=11'),
fit: BoxFit.cover),
),
child: Center(
child: Text(
'myText',
style: TextStyle(color: Colors.white, fontSize: 40.0),
)),
),
],
),
),
Expanded(
flex: 1,
child: SmoothPageIndicator(
controller: controller, // PageController
count: 3,
effect: WormEffect(), // your preferred effect
),
)
],
),
),
);
}
}
You can use AnimatedSwitcher as the body of your main widget:
AnimatedSwitcher(
transitionBuilder: (Widget child, Animation<double> animation) {
return FadeTransition(
child: child,
opacity: animation,
);
},
duration: const Duration(milliseconds: 600),
child: _widgetOptions.elementAt(_selectedIndex))