#image #flutter #text #stack #draggable
#изображение #flutter #текст #стек #перетаскиваемый
Вопрос:
Я создаю приложение для создания мемов. И мне нужно показать несколько текстов поверх изображений, я могу получить один перетаскиваемый текст, но я хочу, чтобы пользователь добавил несколько текстов. не могли бы вы мне помочь.
Я извлекаю изображение через свой API и создал макет с наложением, в который я добавил свой текст. Я предоставил пользователям некоторые опции настройки текста. Я хочу, чтобы пользователи добавляли несколько текстов, и они также могут их настраивать
import 'dart:io';
import 'dart:math';
import 'dart:typed_data';
import 'dart:convert';
import 'package:admob_flutter/admob_flutter.dart';
import 'package:bordered_text/bordered_text.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:meme_app/Screens/CustomMemes.dart';
import 'package:meme_app/Services/admob_services.dart';
import 'dart:ui' as ui;
import 'package:meme_app/image editor/lists.dart';
import 'package:path_provider/path_provider.dart';
class CustomSceen3 extends StatefulWidget {
final String imgUrl;
final File imgFile;
CustomSceen3({
this.imgUrl,
this.imgFile,
});
@override
_CustomSceen3State createState() => _CustomSceen3State();
}
class _CustomSceen3State extends State<CustomSceen3> {
GlobalKey<ScaffoldState> scaffoldState = GlobalKey();
Size size = Size(600, 800);
List<Widget> data = <Widget>[];
Offset offset = Offset.zero;
String addedText = '';
String newText;
int total=0;
//settings
Color pickerColor = Color(0xffffffff);
Color currentColor = Color(0xffffffff);
double textSize = 28.0;
String customFont = 'Aileron-Black';
GlobalKey _key = GlobalKey();
File _imageFile;
Random rng = new Random();
int whiteSpace = 0;
bool strike = false;
double strokeSize = 2.0;
Color strokePickerColor = Color(0xff000000);
Color strokeCurrentColor = Color(0xff000000);
TextEditingController myController = TextEditingController()
..text = "";
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: [
Expanded(
child: Container(
color: Colors.black,
child: Center(
child: SingleChildScrollView(
child: Container(
color: Colors.white,
child: RepaintBoundary(
key: _key,
child: Stack(
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
height: whiteSpace.toDouble() * 5,
color: Colors.white,
),
widget.imgFile == null
? Image(
image: NetworkImage(widget.imgUrl),
)
: Image.file(widget.imgFile, height: 300,
width: MediaQuery
.of(context)
.size
.width,
fit: BoxFit.fill,),
],
),
Positioned(
left: offset.dx,
top: offset.dy,
child: GestureDetector(
onPanUpdate: (details) {
setState(() {
offset = Offset(
offset.dx details.delta.dx, offset.dy details.delta.dy);
});
},
child: Container(
child: BorderedText(
strokeColor: strokeCurrentColor,
strokeWidth: strokeSize ,
child: Text(
addedText,
style: TextStyle(
fontFamily: customFont,
fontSize: textSize,
color: currentColor
),
),
),
),
),
),
],
),
),
),
),
),
)
),
Container(
color: Colors.black,
height: 80.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
DropdownButton<int>(
style: TextStyle(
color: Colors.white,
),
value: whiteSpace,
dropdownColor: Colors.black87,
isDense: true,
icon: Icon(Icons.padding, color: Colors.white,),
iconSize: 30,
onChanged: (int newValue) {
setState(() {
whiteSpace = newValue;
});
},
items: whiteSpaceList
.map<DropdownMenuItem<int>>((int value) {
return DropdownMenuItem<int>(
value: value,
child: Text(value.toString() "%"),
);
}).toList(),
),
Center(
child: Text(
"Add Space", maxLines: 2, overflow: TextOverflow
.clip,
style: TextStyle(
fontSize: 11, color: Colors.white),
),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(Icons.text_format, color: Colors.white,
size: 30,),
onPressed: () {
TextDialog();
}
),
Text(
"Text", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(
Icons.emoji_emotions_outlined, color: Colors
.white, size: 30,),
onPressed: null
),
Text(
"Sticker", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(
icon: Icon(Icons.download_outlined, color: Colors
.white, size: 30,),
onPressed: null
),
Text(
"Save", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: GestureDetector(
onTap: (){
setTextStyle();
},
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text(
"Aa",style:TextStyle(
fontSize: 30,color: Colors.white,fontFamily: 'ComicRelief'
),
),
Text(
"Font", maxLines: 2, overflow: TextOverflow.clip,
style: TextStyle(fontSize: 11, color: Colors.white),
)
],
),
),
),
],
)
)
],
),
),
);
}
Widget setTextStyle(){
showDialog(
context: context,
builder: (BuildContext context){
return Dialog(
backgroundColor: Colors.black54,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: SizedBox(
height: 400,
child: Center(
child: Column(
children: [
CustomTextStyle(
tittle: "Black Text",
color: Colors.white,
strokecolor: Colors.white,
font: 'OpenSans-Regular',
strokewidth: 0.0,
onTap: (){
setState(() {
strokeSize= 0.0;
currentColor=Colors.black;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "STANDARD MEME",
color: Colors.white,
strokecolor: Colors.black,
font: 'Anton',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'Anton';
strokeCurrentColor=Colors.black;
addedText=addedText.toUpperCase();
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Modern Meme",
color: Colors.black,
strokecolor: Colors.white,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.black;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Dark Modern Meme",
color: Colors.white,
strokecolor: Colors.black,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Black Object White Outline",
color: Colors.black,
strokecolor: Colors.white,
font: 'Aileron-Bold',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.black;
customFont= 'Aileron-Bold';
strokeCurrentColor=Colors.white;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "White Object Black Outline",
color: Colors.white,
strokecolor: Colors.black,
font: 'Aileron-Bold',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Colors.white;
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
),
CustomTextStyle(
tittle: "Yellow Subtittle",
color: Color(0xfeFFE400),
strokecolor: Colors.black,
font: 'OpenSans-Regular',
strokewidth: 3.0,
onTap: (){
setState(() {
strokeSize= 3.0;
currentColor=Color(0xfeFFE400);
customFont= 'OpenSans-Regular';
strokeCurrentColor=Colors.black;
Navigator.of(context).pop();
});
},
)
],
),
),
),
),
);
}
);
}
Widget TextDialog() {
showDialog(
context: context,
barrierDismissible: true, // user must tap button!
builder: (BuildContext context) {
return ListView(
children:[ Container(color: Colors.black54,
child: Dialog(
backgroundColor: Colors.transparent,
child: Padding(
padding: const EdgeInsets.all(5.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Row(
children: [
IconButton(
icon: Icon(Icons.invert_colors, color: Colors.white),
onPressed: null),
IconButton(
icon: Icon(Icons.add_circle, color: Colors.white),
onPressed: null),
IconButton(
icon: Icon(Icons.remove_circle, color: Colors.white),
onPressed: null),
IconButton(icon: Icon(Icons.format_align_center_outlined), onPressed: null)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
OutlineButton(
borderSide: BorderSide(width: 1.0,
color: Colors.white,
style: BorderStyle.solid),
onPressed: () {
setState(() {
addedText = myController.text;
Navigator.of(context).pop();
}
);
},
child: Text(
"Got it", style: TextStyle(color: Colors.white),
),
)
],
)
],
),
textfield(),
Container(height: 50,
color: Colors.black,
child: ListView.builder(
itemCount: colors.length,
scrollDirection: Axis.horizontal, physics: ScrollPhysics(),
itemBuilder: (context, index) {
return Padding(
padding: const EdgeInsets.all(5.0),
child: GestureDetector(
onTap: () {
setState(() {
currentColor = colors[index];
Navigator.of(context).pop();
TextDialog();
});
},
child: Container(
width: 40.0,
decoration: BoxDecoration(
color: colors[index], //this is the important line
shape: BoxShape.circle,
border: Border.all(
width: 2.0, color: Colors.white60)
),
),
),
);
},
),
),
],
),
),
),
),
],
);
}
);
}
Widget textfield() {
return TextField(
controller: myController,
maxLines: 10,
);
}
}
class CustomTextStyle extends StatelessWidget {
CustomTextStyle({this.color,this.tittle,this.strokecolor,this.font,this.strokewidth,this.onTap
});
final Color color;
final Color strokecolor;
final double strokewidth;
final String tittle;
final String font;
final Function onTap;
@override
Widget build(BuildContext context) {
return ListTile(
onTap: onTap,
title: BorderedText(
strokeColor: strokecolor,
strokeWidth: strokewidth,
child: Text(
tittle,
style: TextStyle(
color: color,fontFamily: font,fontSize: 17,letterSpacing: 1.05
),
),
),
);
}
}
Комментарии:
1. Где ваш код? Что вы пытались решить для своей проблемы? Вы взглянули на это: medium.com/flutter-community /…
2. я добавил свой фрагмент кода, не могли бы вы взглянуть на него
3. Вы сбросили весь свой код и заставляете меня добавлять несколько текстов и разрешать их настройку: ( Stackoverflow — это место, где люди помогают вам с ошибками и проблемами в вашем коде, и это не служба кодирования. Что вы пытались решить для своей проблемы? Вы смотрели статью выше?