Skip to content

Instantly share code, notes, and snippets.

@mosleim
Last active December 30, 2023 23:36
Show Gist options
  • Save mosleim/8d0e8b4a20d70c58787bf7cad5aaa48e to your computer and use it in GitHub Desktop.
Save mosleim/8d0e8b4a20d70c58787bf7cad5aaa48e to your computer and use it in GitHub Desktop.
show color from text with flutter

just create new flutter project, and replace the main.dart.

try to paste in textfield :

   Turquoise Blue (#40E0D0)
   Coral Pink (#FF6F61)
   Sunny Yellow (#FFD700)
   Leaf Green (#8F9779)
   Creamsicle Orange (#FFA07A)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Show pallete',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.black),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class ColorItem {
final Color color;
final String text;
ColorItem({
required this.color,
required this.text,
});
}
class _MyHomePageState extends State<MyHomePage> {
String text = "";
List<ColorItem> palletes = [];
onChange(String text) {
setState(() {
this.text = text;
});
}
generate() {
final teks1 = text.split('\n');
List<ColorItem> colors = [];
for (var teks in teks1) {
final index = teks.indexOf('#');
if (index < 0) continue;
final teksHex = teks.substring(index + 1, index + 7);
colors.add(
ColorItem(
color: Color(int.parse(teksHex, radix: 16)).withOpacity(1),
text: teks,
),
);
}
setState(() {
palletes = colors;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: const Text('Show color pallete'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
child: Row(
children: palletes
.map(
(e) => Flexible(
child: Container(
height: double.infinity,
width: double.infinity,
padding: const EdgeInsets.all(12),
color: e.color,
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text(
e.text,
textAlign: TextAlign.center,
),
],
),
),
),
)
.toList(),
),
),
Row(
children: [
Expanded(
child: Padding(
padding: const EdgeInsets.all(24),
child: TextField(
onChanged: onChange,
maxLines: 10,
decoration:
const InputDecoration(border: OutlineInputBorder()),
),
),
),
TextButton(
onPressed: generate,
child: const Text("Generate"),
)
],
),
],
),
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment