Skip to content

Instantly share code, notes, and snippets.

@Klerith
Last active April 12, 2024 19:56
Show Gist options
  • Star 21 You must be signed in to star a gist
  • Fork 4 You must be signed in to fork a gist
  • Save Klerith/2fde6c5cc9897457aecd803cffff3976 to your computer and use it in GitHub Desktop.
Save Klerith/2fde6c5cc9897457aecd803cffff3976 to your computer and use it in GitHub Desktop.

Instalaciones recomendadas - Flutter Avanzado

Instalaciones Necesarias

git config --global user.name "Tu nombre"
git config --global user.email "Tu correo"
  • Node

  • Flutter

  • Android Emulator (iOS Emulator si es posible)

Extensiones de VSCode

Dart

Flutter

Flutter Bloc

Activitus Bar

Configuración del Bracket Pair Colorizer 2

Bracket Pair Colorizer 2

"bracket-pair-colorizer-2.colors": [
    "#fafafa",
    "#9F51B6",
    "#F7C244",
    "#F07850",
    "#9CDD29",
    "#C497D4"
],

Tema que estoy usando en VSCode:

{
// Place your snippets for dart here. Each snippet is defined under a snippet name and has a prefix, body and
// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
// same ids are connected.
// Example:
// "Print to console": {
// "prefix": "log",
// "body": [
// "console.log('$1');",
// "$2"
// ],
// "description": "Log output to console"
// }
"Rectángulo Widget": {
"prefix": "rectangulo",
"body": [
"class Rectangulo extends StatelessWidget {",
" @override",
" Widget build(BuildContext context) {",
" return Container(",
" width: 70,",
" height: 70,",
" decoration: BoxDecoration(",
" color: Colors.blue",
" ),",
" );",
" }",
"}",
],
"description": "Log output to console"
},
"Flutter Page": {
"prefix": "fl-page",
"body": [
"import 'package:flutter/material.dart';",
"",
"",
"class ${1:name}Page extends StatelessWidget {",
"",
" @override",
" Widget build(BuildContext context) {",
" return Scaffold(",
" body: Center(",
" child: Text('Hola Mundo'),",
" ),",
" );",
" }",
"}",
],
"description": "Crea una página de flutter fácilmente"
},
"Flutter Screen": {
"prefix": "fl-screen",
"body": [
"import 'package:flutter/material.dart';",
"",
"",
"class ${1:name}Screen extends StatelessWidget {",
"",
" @override",
" Widget build(BuildContext context) {",
" return Scaffold(",
" body: Center(",
" child: Text('Hola Mundo'),",
" ),",
" );",
" }",
"}",
],
"description": "Crea una página/screen de flutter fácilmente"
}
}
@stradaroca
Copy link

stradaroca commented Sep 14, 2020

Hola, comparto mi configuración para ocultar el Activity Bar y agregar vistas al Activitus Bar

settings.json

  "workbench.activityBar.visible": true,
  "activitusbar.views": [
    {
      "name": "explorer",
      "codicon": "files"
    },
    {
      "name": "search",
      "codicon": "search"
    },
    {
      "name": "scm",
      "codicon": "source-control"
    },
    {
      "name": "debug",
      "codicon": "debug-alt"
    },
    {
      "name": "extensions",
      "codicon": "extensions"
    },
    {
      "name": "extension.test",
      "codicon": "beaker",
      "tooltip": "Test"
    },
    {
      "name": "extension.flutter",
      "codicon": "symbol-class",
      "tooltip": "Flutter"
    },
    {
      "name": "extension.bookmarks",
      "codicon": "bookmark",
      "tooltip": "Bookmarks"
    },
    {
      "name": "extension.todo-tree-container",
      "codicon": "list-tree",
      "tooltip": "TODOs"
    }
  ]

Para agregar más, pueden buscar los nombres filtrando workbench.view.extension. en los Keyboard Shortcuts y elegir iconos acá codeicons. Si alguien sabe como colocar el icono de la extensión sería genial.

@nymbuzcumulus
Copy link

Hola,
Mi trabajo se realiza en Kali-Linux, y estoy usando Android studio, /Flutter
Algunas cosas como Activitus Bar,, no las hay para Android studio.
Tambien he tenido problemas instalando Mongodb Compass, este aunque finalmente pude hacerlo trabajar pero da la pantalla en blanco, y solamente funciona llamandolo con --no-sandbox //

Hay alguna alternativa para estas cuestiones?
Creo que si usamos SQL Lite o algo similar podria ser la opcion. Espero comentarios>

Saludos !

@StivenOsuna9909
Copy link

Estoy confundido alguien me puede echar una mano de como instalar los snippets ? o como los encuentro mas facil en el marketplace de vsc por el nombre

@jdrios-dev
Copy link

@StivenOsuna9909 los snippets se cambiar en la configuracion de VS CODE, no en el market place, para ellos debes oprimir CTRL + P y escribir: ">Preference: configure user snippets", luego elighes el de dart.json y ahí copias y pegas

@jmsm157
Copy link

jmsm157 commented Mar 6, 2022

Estoy confundido alguien me puede echar una mano de como instalar los snippets ? o como los encuentro mas facil en el marketplace de vsc por el nombre

mira esto te puede ayudar
https://www.freecodecamp.org/news/create-your-own-custom-code-snippets/#:~:text=A%20code%20Snippet%20is%20a,%2C%20code%20editors%2C%20and%20IDEs.

@jorgeflorescarlos
Copy link

Hola, Mi trabajo se realiza en Kali-Linux, y estoy usando Android studio, /Flutter Algunas cosas como Activitus Bar,, no las hay para Android studio. Tambien he tenido problemas instalando Mongodb Compass, este aunque finalmente pude hacerlo trabajar pero da la pantalla en blanco, y solamente funciona llamandolo con --no-sandbox //

Hay alguna alternativa para estas cuestiones? Creo que si usamos SQL Lite o algo similar podria ser la opcion. Espero comentarios>

Saludos !

Pudiste solucionar tu problema?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment