I'm working with flutter web. I want to select multiple text in multiple line when I press and drag mouse but I can't find solution. I used SelectableText but it only allows to select when press on the text area. Anyone have ideas, help me please. Thanks in advance.
I want to select text like my following picture.
Example for my question
You can copy texts natively without any package using SelectionArea present in flutter
https://api.flutter.dev/flutter/material/SelectionArea-class.html
sample code sniopet to get started quickly
return SelectionArea(
child: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: const <Widget>[
Text('Row 1'),
Text('Row 2'),
Text('Row 3'),
],
),
),
),
);
or this if you want to select images as well
https://github.com/wilsonowilson/better_selection
sample code snippet
class Screen extends StatelessWidget {
const Screen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return SelectableScope(
child: Scaffold(
body: Column(
children: [
...
],
),
),
);
}
}
Related
I am using flutter 3.0.0
In my application I am displaying a native video using platform view.
The video is displaying but it is always displaying on upper left corner and it covers other
widgets even they are in a stack.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Stack(
children: [
Center(
child: ConstrainedBox(
constraints:
const BoxConstraints.expand(height: 200, width: 200),
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child:
const AndroidView(viewType: 'remote-video'),
),
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () {
MethodChannels.coreMethodChannel
.invokeMethod("load");
},
child: const Text('Invoke'),
),
),
],
),
],
),
);
}
This is how it looks when I run the code
As you can see it is displaying over everything.
Can you provide some advice on how to fix this?
As of 31/07/2022 this seems to be a bug in flutter >= 3.0.0. Following the solution in this question Flutter AndroidView Widget I downgraded to 2.10.5 and then it worked as expected. Hopefully the flutter team will resolve it shortly.
I am trying to access the profile of signed in user by clicking on the profile option in my dashboard of the app. I have created a class Profilepage which contains the user information needed to be displayed. Now, I need to access the objects of this class by clicking on the profile option from my dashboard but while passing Profilepage in Navigator.push I am facing several errors.
Please, help me resolve the issue. thanks!!
Profilepage.dart file
import 'package:flutter/material.dart';
import 'package:flutter_groceryapp/models/user.dart';
class Profilepage extends StatelessWidget {
final Userprofiles getprofiles;
Profilepage({required this.getprofiles});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile'),
),
body: Card(
child: Column(
children: [
Row(
children: [
Text('First name'),
Text(getprofiles.firstname)
],
),
Row(
children: [
Text('Last name'),
Text(getprofiles.lastname)
],
)
],
),
),
);
}
}
profile navigator option on dashboard
I want make text to the right, what am I doing so far
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _judul = 'Private Chat';
static var _warnaTema = Colors.pink[100];
Widget _dummyExpanded() {
return Expanded(
child: Container(), //contain empty data,
); //just for fill remaining space
}
#override
Widget build(BuildContext context) {
return MaterialApp(
title: _judul,
theme: ThemeData(
primaryColor: _warnaTema,
),
home: Column(
children: [
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 1'),
],
),
),
Container(
child: Row(
children: [
this._dummyExpanded(),
Text('this is real data 2'),
],
),
)
],
),
);
}
}
The layout output is what I expected (the text is in right), however there's unneeded code.
As you see I use unnecessary method _dummyExpanded to fill
available space which it's just expanded with empty container. Of course it will be hard to read since there are many nested row and column, how I remove that unneeded method without loss layout output what I expect?
I believe I should have use alignment but I don't know how to
Method 1.
Container(
child: Row(
mainAxisAlignment:MainAxisAlignment.end,
children: [
Text('this is real data 2'),
],
),
)
Method 2.
I prefer this method, You can wrap text with this method.
You can also use Flexible widget instead of Expanded
Container(
child: Row(
children: [
Expanded(child: Text('this is real data 2', textAlign:TextAlign.end )),
],
),
)
Method 3.
If you have only Text widgets as children of Column widget then you can set crossAxisAlignment: CrossAxisAlignment.end, for your parent Column widget.
I'm still new to Flutter Web. I have 3 lines in my flutter web, the first line is the welcome message, the second line is a product and the last is contact, to see those lines user needs to do a scroll on my web. But how can I wrap my code using the Scroll function in flutter web? this is my code.
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return Scaffold(
body: Column(
children: [
Container(
// Code Line 1
height: size.height,
width: size.width,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/container.jpg"),
fit: BoxFit.fitWidth),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
CusAppBar(),
Spacer(),
Body(),
Spacer(
flex: 1,
),
],
),
),
Container(
// Code Line 2 Here
),
Container(
// Code Line 3 Here
)
],
),
);
}
}
My background is react, usually we just use tag ScrollView outside the container so the user can scroll the page. But how I can implement it on flutter web?
Thank you.
Try to add your fist Column inside SingleChildScrollView like below hope it help you:
body: SingleChildScrollView(
child:Column(
children:[
//Declare Your Widgets Here
],
),
),
I am a web dev in MS stack trying flutter for a personal project of mine. I want to create a layout like in the below URL in the meeve app with circular images with text below the image button/icon.
https://www.thedroidsonroids.com/blog/apps-made-with-flutter#meeve
I tried the layout given in the example on flutter docs below but it is not what I am looking for and I am not able to re purpose this for my case. https://flutter.dev/docs/cookbook/lists/grid-lists
Any leads in this respect is appreciated.
You can use CircleAvatar in a Column.
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
CircleAvatar(backgroundImage: AssetImage("assets/images/chocolate_pic.png"), radius: 40),
SizedBox(height: 12),
Text("Chocolate"),
],
),
),
);
}