i am displaying image in my UI using mage.network widget, and display Text widget in Stack
like following
Stack(
alignment: Alignment.center,
children: [
Image.network('myImage'),
Text('Hello world')
],
);
also the same idea but with video
Stack(
alignment: Alignment.center,
children: [
VideoPlayer('myVideoFile'),
Text('Hello world')
],
);
now my question : How can i merge ANY Widget that add into stack (in my case Text('Hello world')) into one final result file ?
in other word : if i want to save my image or video into my storage so Of course they will be saved separately from the widgets they have inside Stack . but How could i merge the widgets with them and became one file? so when i save them to my storage and want to open them again i will find the widgets already merged with them
the only way i have now is to screenshot my screen using screenshot plugin and save the result as one file . and the same with video but with record_screen plugin But it is a very bad experience
What should I look for to handle this work?
any plugin ?
Any suggestions?
Related
I am new to flutter and I am trying to use camera with flutter.
I want to understand the difference between CameraPreview(controller) and controller.buildPreiview() because it behaves differently for some reason.
This is the code for the showing the preview:
#override
Widget build(BuildContext context) {
return _isCameraInitialized
? Material(
child: Stack(
children: [
GestureDetector(
...
child: _cameraController!.buildPreview()
// child: CameraPreview(_cameraController!)
),
....
]
),
)
: Container();
The result for using _cameraController!.buildPreview():
This is the desired result - make the camera preview appear as full screen.
But the result for using CameraPreview(_cameraController!) is:
This leaves the right of the screen white and does not take the full width of the screen for some reason. I also tried to wrap it with AspectRatio but it didn't work.
I was wondering why those methods behave differently and if it is better to use one of them over the other?
use this solution it will remove the right vertical banner :
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child:CameraPreview(_cameraController),
cv template and I want to edit it with flutter
Everything in Flutter is widgets, this image would be an Image widget in your Flutter app.
You can use Stack widget to put things over each other. so You can put image over an image by using Stack widget.
Unfortunately you can't edit text of an image in Flutter, Instead I would rather to edit this image (for putting image and editing text) by Photoshop for example and then implementing it as one piece widget in my Flutter app.
What I assess from your question is you want to have a layout like the one given in your link, right? For a circular image, you could use CircleAvatar. As for the text you could use the Text widget. Now put these widgets inside a Column or Row. You seem to be new to Flutter and I'd suggest you to get a good grip on the basics first. Anyhow, here's a little dummy code snippet you could extend to achieve what you're looking for
Column(
crossAxisAlignment: CrossAxisAlignment
.start, //if you want your widgets to align on left in your col
children: [
CircleAvatar(
radius: 70,
foregroundImage: AssetImage("pathToYourAssetImg"),
),
SizedBox(
height: 20, //set this to your intended value
),
Text( //you could also create a custom text widget and pass the arguments if you don't want to hardcode text widgets over & over again for all of your text
"yourText",
style: TextStyle(
color: Colors.black87,
fontSize: 20, //set this to your value
fontWeight: FontWeight.bold //if you want to have a bold text
),
),
],
);
I'm currently building a podcast app and what I want to implement is something similar to miniplayer in Spotify.
When user taps on a podcast and start listening, I want to open a miniplayer and make it alive across on all pages.
First thing come up to my mind is using Overlay widget or using a custom navigator for all of the pages and put that navigator inside a stack. I wonder if anyone implement something like this before or what's the best way to approach this.
Try this package with less effort, miniplayer
Stack(
children: <Widget>[
YourApp(),
Miniplayer(
minHeight: 70,
maxHeight: 370,
builder: (height, percentage) {
return Center(
child: Text('$height, $percentage'),
);
},
),
],
),
I would recommend using this with a Stack. Maybe something like this:
class PodcastApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
Expanded(
child: Stack(
children: [
SizedBox.expand(child: PageView()),
Align(
alignment: Alignment.bottomCenter,
child: YOUR_MINI_PLAYER(),
)
],
),
),
BottomNavigationBar(),
],
),
);
}
}
I did the same thing but not for an audio player, where was that
First, build a BasePage that contains all of these tabs
Secondly, use GetIt to transfer the object from one page to another. The goal is to find out if the user played an audio clip or not.
Third You can store in GetIt the audio track, name, picture, ..etc.
In BasePage, you check if this object has been modified or if it is empty. The goal of viewing in BasePage is for it to be visible in all sections of the tab.
Do not hesitate to ask me if something is not clear.
Check out this persistent_bottom_nav_bar package
Features of this package
Highly customizable persistent bottom navigation bar.
Ability to push new screens with or without the bottom navigation bar.
20 styles for the bottom navigation bar.
Includes functions for pushing screen with or without the bottom
navigation bar i.e. pushNewScreen() and pushNewScreenWithRouteSettings().
Based on flutter's Cupertino(iOS) bottom navigation bar.
Can be translucent for a particular tab.
Custom styling for the navigation bar. Click here for more
information.
Handles hardware/software Android back button.
I hope this is what you are looking for.
Hello and thank you in advance..
I am new to flutter and i want to make screen which i shown u...! Just look at the picture..i marked red color in that pic i have circle avater and when i tap on each i need to show there data on same page...no need to navigate to another screen...! Show that data on same page...! Plz help me provide me if there code u have
Something like this will work, you're basically creating your widget tree in a declarative way in flutter, the column will allow you to stack two separate widgets (your list and your grid). I recommend going through a few tutorials (starting here: https://flutter.dev/docs/get-started/codelab)on building an app, flutter comes really easy, then watch all the videos created by the flutter team on the different widgets. Everything is a widget and you will use each kind of widget to build your ui.
#override
Widget build(BuildContext context) {
return Stack(children: [
Positioned(
top: 20,
child: Column(
children: [
ListView(
children: [/*circle images*/],
),
GridView.count(
crossAxisCount: 10,
children: [/*profile images*/],
)
],
))
]);
}
Hi all fellow developers,
I am developing a responsive web page in flutter using the flutter web SDK, but i am stuck at one part of the page where i have a Row inside row I have 2 Containers among which i want the 1st Container to be Scrollable and the Second container to be of constant size(Non scrollable) just like whatsapp web ui where contact list keeps scrolling but the chat side and the rest of the page doesn't.
please Help me,
Thanks in advance...
This should work You need a fixed sized container and make sure a Scroll able widget should be inside it. Now size can be made responsive by using Media Query Parameters and below code you only need to adjust space and sizing and it would work.
Row(
//Your parent Row
children: [
Container(
//static non scrollable container
child: Column(
children: [
//Children you want to add
//this wont be scrollable
//It is also preferred that you give this some height or width too
],
),
),
Container(
//Scrollable container
//Please adjust height and width yourself
//You can use media query parameters to make it responsive
width: 200,
height: 500,
child: SingleChildScrollView(
//You can also change the scroll direction
child: Column(
//Add children you want to be in
//Scrollable column
),
),
)
],
),