How to add a text to an image in flutter web
How do I add text on the go to an image on flutter web? Is there widget for image editing. How can we achieve this?
You can use either custom painting (other answer found by #F-1) or stack other widget on top of your image (here is excellent example, with text on top of images as you might want.
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Add Text to an Image"),
),
body:Container(
margin: EdgeInsets.only(top: 50.0),
child: Stack(
children: <Widget>[
Image.network("http://www.panama-offshore-services.com/wp-
content/uploads/2014/08/Tech-business-panama.jpg"),
Container(
margin: EdgeInsets.only(top:20.0),
),
Text("This is text",
style: TextStyle(
color: Colors.red,
fontSize: 18.0
),)
],
),
)
),
);
}
}
// use stack to add text on image
Related
I'm new to flutter, and I'm trying to divide the screen into three parts, here's my attempt:
class Homepage extends Statelesswidget {
const HomePage({Key? key}): super (key: key);
#override
Widget build(BuildContext context) {
return Row(children: [
const Expanded(
flex: 1,
child: Scaffold(
body: Center(child: Text("Left")),
), // Scaffold
), // Expanded
Expanded(
flex: 2,
child: Scaffold(
appBar: AppBar(),
body: const Center(child: Text("Middle")),
), // Scaffold
), // Expanded
const Expanded(
flex: 1,
child: Scaffold(
body: Center(child: Text("Right")),
), // Scaffold
) // Expanded
]);
}
}
and main.dart looks like:
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
debugShowCheckedModeBanner: false,
);
}
}
Here's the result:
I got these vertical lines out of nowhere, how can I get rid of them?
Welcome to Flutter 💙
These lines are the boarders of the Scaffold widget which you are using inside each Expanded widget in the row.
Now intead of looking for a way to remove these border lines, I suggest you to learn more about the Scaffold widget in Flutter
Since you are new to Flutter, you have to be aware with the goal of using Scaffold widget, which is stated in the official docs as the following:
Implements the basic material design visual layout structure.
This class provides APIs for showing drawers and bottom sheets.
So in other words, we use the Scaffold Widget as a basic canvas for the screen with some properties to implement popular layout designs, such as AppBar, BottomNavigationBar, FloatingActionButton, etc...
Then, we use it once in the screen to set the basic layout, and does not required to be used multiple times for each sub part of the screen
Then your HomePage code should be something like:
class HomePage extends StatelessWidget {
const HomePage({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: Row(children: [
const Expanded(
flex: 1,
child: Center(child: Text("Left")),
), // Expanded
Expanded(
flex: 2,
child: Column(
children: [
AppBar(),
const Expanded(
child: Center(child: Text("Middle")),
),
],
),
),
const Expanded(
flex: 1,
child: Center(child: Text("Right")),
)
]),
);
}
}
I am trying to design a splash screen. There is a gif that shows in a splash screen. There is no problem of showing the gif.
The problem is that the gif restarts from first frame when the page rebuilds. In my use case, rebuild is expected since a provider listens a firebase user.
My question is that, how can i ensure the gif starts in next build at specific frame from where it left off in previous build.
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:provider/provider.dart';
import 'package:provider_architecture/provider_architecture.dart';
import 'package:myproject/core/viewmodels/startup_view_model.dart';
class StartUpView extends StatelessWidget {
#override
Widget build(BuildContext context) {
FirebaseUser user = Provider.of<FirebaseUser>(context);
ScreenUtil.init(context, width: 411, height: 683, allowFontScaling: true);
return ViewModelProvider<StartUpViewModel>.withConsumer(
viewModel: StartUpViewModel(),
builder: (context, model, child) {
model.handleStartUpLogic(user);
return Scaffold(
backgroundColor: Colors.white,
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Image.asset('assets/images/lock.gif', height: 100.h)
],
),
),
);
},
);
}
}
That's interesting. My problem is the complete opposite of yours.
I want my gif to start from the beginning each time I load the gif, but it always starts at the frame that it left off last time.
return SafeArea(
child: Scaffold(
backgroundColor: Colors.black,
appBar: AppBar(
backgroundColor: Colors.black,
title: Text(
getImageName(),
),
centerTitle: true,
),
body: Center(
child: Column(
children: <Widget>[
Expanded(
child: Image (
height: height * 0.75,
width: width * 0.75,
image: AssetImage(getGuideImagePath()),
)
),
However, for your problem, this implementation may help you.
https://www.youtube.com/watch?v=xZ9vdVkI4Vc&feature=youtu.be
https://github.com/aliyigitbireroglu/flutter-image-sequence-animator/tree/master/image_sequence_animator
Oops guys, how are you?
I am making an app using flutter and came across an issue related to animations.
Based on my study I wanted to make an animation where a center image on the screen after the animation is on top (topcenter).
But I didn't find a way to animate using relative values (for example the actual screen height value) only with values that I would describe (which causes problems on screens with different sizes).
Does anyone have any solutions?
AnimatedLogo({this.controller}) :
imagePosition = Tween(
begin: (Use screen size here without context),
end: (0 to topcenter)
).animate(
CurvedAnimation(
parent: controller,
curve: Interval(0.0, 0.150),
)
);
You have some options, you can use AnimatedContainer or AnimatedPositioned
All these options can use AlignmentDirectional.bottomCenter , topCenter
For other options, you can reference this https://medium.com/aubergine-solutions/options-to-animate-in-flutter-2cec6612c207
full code with AnimatedContainer
import 'package:flutter/material.dart';
import 'dart:ui';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
// This is the theme of your application.
//
// Try running your application with "flutter run". You'll see the
// application has a blue toolbar. Then, without quitting the app, try
// changing the primarySwatch below to Colors.green and then invoke
// "hot reload" (press "r" in the console where you ran "flutter run",
// or simply save your changes to "hot reload" in a Flutter IDE).
// Notice that the counter didn't reset back to zero; the application
// is not restarted.
primarySwatch: Colors.blue,
),
home: Option5()
);
}
}
class Option5 extends StatefulWidget {
#override
_Option5State createState() => _Option5State();
}
class _Option5State extends State<Option5> with TickerProviderStateMixin {
AlignmentDirectional _ironManAlignment = AlignmentDirectional.bottomCenter; //AlignmentDirectional(0.0, 0.7);
#override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/person-96.png'),
fit: BoxFit.cover)),
),
AnimatedContainer(
duration: Duration(seconds: 3),
alignment: _ironManAlignment,
child: Container(
height: 250,
width: 150,
child: Image.asset('assets/images/alarm-80.png'),
),
),
Align(
alignment: AlignmentDirectional.bottomCenter,
child: RaisedButton(
onPressed: () {
_flyIronMan();
},
child: Text('Go'),
color: Colors.red,
textColor: Colors.yellowAccent,
shape: BeveledRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(20))),
),
)
],
);
}
void _flyIronMan() {
setState(() {
_ironManAlignment = AlignmentDirectional.topCenter; //AlignmentDirectional(0.0,-0.7);
});
}
}
I am trying to add a logo before the title in the App Bar but it seems the image only takes the width and height of the leading property.
import 'package:flutter/material.dart';
class Home extends StatelessWidget {
Widget build(context){
return Scaffold(
appBar: AppBar(
title:Text('Hi, Andi Loshi'),
backgroundColor: Color.fromRGBO(230, 1, 1,1),
leading: new Image.asset("assets/images/logo.png",
fit:BoxFit.cover,
height:20.00,
width:20.00
),
),
body: Text('Body will reside here')
);
}
}
Though you can not modify size of leading you can add image before title like below in appbar, title please check below code.
import 'package:flutter/material.dart';
void main() => runApp(Home());
class Home extends StatelessWidget {
Widget build(context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Container(
child: Row(
children: [
Image.asset(
"assets/images/logo.png",
fit: BoxFit.cover,
),
SizedBox(
width: 10,
),
Text('Hi, Andi Loshi')
],
),
),
backgroundColor: Color.fromRGBO(230, 1, 1, 1),
),
body: Text('Body will reside here'),
),
);
}
}
#Mussa Kalokola you can just wrap the image in leading with padding that will make it smaller.
I think that's the easiest solution for that.
eg.
appBar: AppBar(
title: Text(_getScreenTitle(context, _selected)),
leading: const Padding(
padding: EdgeInsets.all(16.0),
child: ClipOval(
child: Image(
image: AssetImage('images/test.png'),
),
),
),
),
You can wrap your leading widget inside a Center Widget or set leadingWidth property inside AppBar.
example:
appBar: AppBar(
title: Text('Your Title'),
//leadingWidth: 38.0,
leading: Center(
child: Image(
image: AssetImage('images/test.png'),
),
),
Widgets inside an AppBar have limited size. If you want a custom one, you can implement it from scratch, this article can help you.
You can use the leadingWidth property in the AppBar.
class Home extends StatelessWidget {
Widget build(context){
return Scaffold(
appBar: AppBar(
title:Text('Hi, Andi Loshi'),
backgroundColor: Color.fromRGBO(230, 1, 1,1),
leading: new Image.asset("assets/images/logo.png",
leadingWidth: 80,
fit:BoxFit.cover,
height:20.00,
width:20.00
),
),
body: Text('Body will reside here')
);
}
}
I would like to have my list items perform this animation (mp4) when tapped. I tried using AnimatedCrossFade but it requires its two children to be at the same level, e.g. the detail view cross-fades with the ListView not the tapped item. In fact it seems a Hero animation is the only one that can animate across widgets.
I'm having trouble using Hero. Should it wrap the list item? Does it matter if the Widget subtree is significantly different in the Hero source/destination? Also, can Hero animations be used with LocalHistoryRoutes or staggered animations?
Edit
It's now looking like what I need to do is use an Overlay, the hard part there is that I need to add the selected item to the overlay at the same position on screen where it was tapped, then the animation part would be easy. Possibly of use here is a target/follower pattern e.g. CompositedTransformTarget
You can just use Hero widget to make that kind of animation. Here's my example:
and the source code:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new FirstPage(title: 'Color Palette'),
);
}
}
class FirstPage extends StatefulWidget {
FirstPage({Key key, this.title}) : super(key: key);
final String title;
#override
_FirstPageState createState() => new _FirstPageState();
}
class _FirstPageState extends State<FirstPage> {
final palette = [
{'#E53935': 0xFFE53935},
{'#D81B60': 0xFFD81B60},
{'#8E24AA': 0xFF8E24AA},
{'#5E35B1': 0xFF5E35B1},
{'#3949AB': 0xFF3949AB},
{'#1E88E5': 0xFF1E88E5},
{'#039BE5': 0xFF039BE5},
{'#00ACC1': 0xFF00ACC1},
{'#00897B': 0xFF00897B},
{'#43A047': 0xFF43A047},
{'#7CB342': 0xFF7CB342},
{'#C0CA33': 0xFFC0CA33},
];
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Container(
child: new ListView.builder(
itemCount: palette.length,
itemBuilder: (context, index) => new Hero(
tag: palette[index].keys.first,
child: new GestureDetector(
onTap: () {
Navigator
.of(context)
.push(new ColorPageRoute(palette[index]));
},
child: new Container(
height: 64.0,
width: double.infinity,
color: new Color(palette[index].values.first),
child: new Center(
child: new Hero(
tag: 'text-${palette[index].keys.first}',
child: new Text(
palette[index].keys.first,
style: Theme.of(context).textTheme.title.copyWith(
color: Colors.white,
),
),
),
),
),
),
)),
),
);
}
}
class SecondPage extends StatelessWidget {
final Map<String, int> color;
SecondPage({this.color});
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Color'),
),
body: new Hero(
tag: color.keys.first,
child: new Container(
color: new Color(color.values.first),
child: new Center(
child: new Hero(
tag: 'text-${color.keys.first}',
child: new Text(
color.keys.first,
style:
Theme.of(context).textTheme.title.copyWith(color: Colors.white),
),
),
),
),
),
);
}
}
class ColorPageRoute extends MaterialPageRoute {
ColorPageRoute(Map<String, int> color)
: super(
builder: (context) => new SecondPage(
color: color,
));
#override
Widget buildTransitions(BuildContext context, Animation<double> animation,
Animation<double> secondaryAnimation, Widget child) {
return FadeTransition(opacity: animation, child: child);
}
}
Someone wrote an amazing dart-package for just this purpose: https://pub.dev/packages/morpheus#-readme-tab-
All you then need to do is use the MorpheusPageRoute and the package handles the rest.
...
Navigator.push(
context,
MorpheusPageRoute(
builder: (context) => MyWidget(title: title),
),
);
...
I'd just cheat and wrap the whole thing in a Stack - bottom layer would be a page with the AppBar, and the top layer would be transparent until painted on.
onTap, duplicate ListTile onto the top surface, and then a Hero animation would fill the full screen. It's not very elegant, but the framework doesn't (yet) provide for covering the AppBar easily, so having a canvas ready to be painted on for other tricky animations might be resourceful.
I'm unable to comment or edit Lucas' post (new account) but you also need to provide the parentKey of the widget where the animation is to begin:
final widgetKey = GlobalKey();
...
ListTile(
key: widgetKey,
title: Text('My ListItem'),
onTap: () => Navigator.push(
context,
MorpheusPageRoute(
builder: (context) => MyNewPage(),
parentKey: widgetKey,
),
),
),
https://pub.dev/packages/morpheus