Efigenio - GriedView - Galeria

APLICATIVO GALERIA DE ARTE
Nome: Efigénio Jossias Tchauque
Aplicativo de Galeria de Arte GrideView
Estruturando o programa
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Galeria(),
));
}
class Galeria extends StatefulWidget {

const Galeria({Key? key}) : super(key: key);
@override
_GaleriaState createState() => _GaleriaState();
}
class _GaleriaState extends State<Galeria> with SingleTickerProviderStateMixin {

late AnimationController _controller;
pág. 1
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
//Cabeçalho
appBar: AppBar(
title: Text(
'Galeria de Arte',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
centerTitle: true,
backgroundColor: Colors.blue[400],
),
backgroundColor: Colors.black,
//Fim do Cabeçalho
//Inicio do corpo
body: Padding(
padding: EdgeInsets.all(10.0),
) //Fim do Padding
);
}
}
Criando Grieds usando GriedView
Alterando o Conteúdo do body adicionando dentro do Padding:
Padding: Também definimos um atributo de Padding que define um espaço em torno de

nosso GridView.
pág. 2
O GridDelegate é um delegado que controla o layout dos filhos dentro do GridView.
 SliverGridDelegateWithMaxCrossAxisExtent com o atributo maxCrossAxisExtent.

 SliverGridDelegateWithFixedCrossAxisCount com o atributo crossAxisCount
obrigatório.
CrossAxisCount
Este parâmetro especifica o número de widgets ou grides em uma linha.
MainAxisSpacing
Também definiremos outros atributos. O atributo mainAxisSpacing define o espaço entre as

linhas.
CrossAxisSpacing
O atributo crossAxisSpacing define o espaço entre as colunas.
// Criacao de GridView
child: GridView(
//Disposicao dos Grieds ou Widgets
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 5,
crossAxisSpacing: 5,
mainAxisExtent: 230),
Criação de Container
Onde será armazenado o conteúdo da cada Gride criado e com possibilidade de modifcar os
atributos
Neste é onde vamos mostrar como os widgets serão dipostos que conteúdo terão.
children: <Widget>[
Container(
color: Colors.white,
child: Center(
child: Column(
children: <Widget>[
pág. 3
//Insercao da Imagem online

Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcR8AGh0pnvaF8Slmxsr-
OuFIxE2_f8gdPRSSg&usqp=CAU',
height: 200,
width: 350,
fit: BoxFit.cover,
),
//Criacao de uma caixa com nome da imagem
SizedBox(
height: 5.0,
),
Text(
"Arte; Um olhar da cultura",
style: TextStyle(fontSize: 20.0, color: Colors.black),
),
],
),
),
),
Aplicativo Completo main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: Galeria(),
));
}
class Galeria extends StatefulWidget {

const Galeria({Key? key}) : super(key: key);
@override
_GaleriaState createState() => _GaleriaState();
}
class _GaleriaState extends State<Galeria> with SingleTickerProviderStateMixin {

late AnimationController _controller;
pág. 4
@override
void initState() {
super.initState();
_controller = AnimationController(vsync: this);
}
@override
void dispose() {
super.dispose();
_controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
//Cabeçalho
appBar: AppBar(
title: Text(
'Galeria de Arte',
style: TextStyle(color: Colors.white, fontSize: 30.0),
),
centerTitle: true,
backgroundColor: Colors.blue[400],
),
backgroundColor: Colors.black,
//Fim do Cabeçalho
//Inicio do corpo
body: Padding(
padding: EdgeInsets.all(10.0),
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 4,
mainAxisSpacing: 5,
crossAxisSpacing: 5,
mainAxisExtent: 230),
children: <Widget>[
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
pág. 5
'https://encrypted-
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcT5NQ1SxJZU6Ov2SAu9f49MG84IrvixmH9DQQ&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: O inicio da mudança",
),
],
),
),
),
Container(
child: Center(
pág. 6
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTbbRjzYDx17tovaq-
wHiYUqwDuDZnBt4mcYQ&usqp=CAU',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte; A arte é a Vida",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQMlCjFi54oVb9PLPpFKZOq2R_xwx65n1a9ow&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Cultura da mulher como arte",
),
],
),
),
),
pág. 7
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQEhkw04ebqndNBg8HGAgs6A1TNkMRZedeSNw&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Verdade de uma Nação",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQSF4IF7DcU-
yuTG8mSrREzNtSbXlHmCWTEBQ&usqp=CAU',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Malangatana",
),
],
pág. 8
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTrFY1V3lcI0Mnsynj7Kltf8ttxRXhVW-
QZbg&usqp=CAU',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: O universo unido por Amor",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: O sofrimento da mãe Africa",
pág. 9

),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcSSrJ1c6wh2cnZ_A_QX2rGopbqNq5Y2efgXgw&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Livre nos tornou da guerra",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQvhFttzj_xCVPtLXeRLLOmsUuDHscmoKej2A&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
pág. 10
),
Text(
"Arte: O rosto do assombrado",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcTatuIHuqFRpsqHHv7f690AHHab7SHOyx7OEQ&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arrte: O Mundo dos intelectuais",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcQlczVHNjLcOlFb0_5YDnA51CJw1fWfw790_Q&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
pág. 11
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Povo Makonde",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: A arte africana",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRWso4Hin00WNHBKHiBt7JmBszK4AiDmWsNKg&usqp=CAU
',
pág. 12
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Artesão de mulheres",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Mozlife",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
pág. 13
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Ombro Amigo",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
tbn0.gstatic.com/images?q=tbn:ANd9GcRWso4Hin00WNHBKHiBt7JmBszK4AiDmWsNKg&usqp=CAU
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Artesão de mulheres",
),
],
),
),
),
Container(
child: Center(
pág. 14
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Mozlife",
),
],
),
),
),
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
',
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
"Arte: Ombro Amigo",
),
],
),
),
),
pág. 15
Container(
child: Center(
child: Column(
children: <Widget>[
Image.network(
'https://encrypted-
height: 200,
width: 350,
fit: BoxFit.cover,
),
SizedBox(
height: 5.0,
),
Text(
),
],
),
),
),
],
) //Fim da GrideView
) //Fim do Padding
);
}
}
pág. 16

Efigenio - GriedView - Galeria

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Efigenio - GriedView - Galeria

Enviado por

Direitos autorais:

Formatos disponíveis

APLICATIVO GALERIA DE ARTE

Nome: Efigénio Jossias Tchauque

Aplicativo de Galeria de Arte GrideView

class Galeria extends StatefulWidget {

class _GaleriaState extends State<Galeria> with SingleTickerProviderStateMixin {

Criando Grieds usando GriedView

Alterando o Conteúdo do body adicionando dentro do Padding:

Padding: Também definimos um atributo de Padding que define um espaço em torno de

O GridDelegate é um delegado que controla o layout dos filhos dentro do GridView.

 SliverGridDelegateWithMaxCrossAxisExtent com o atributo maxCrossAxisExtent.

Este parâmetro especifica o número de widgets ou grides em uma linha.

Também definiremos outros atributos. O atributo mainAxisSpacing define o espaço entre as

O atributo crossAxisSpacing define o espaço entre as colunas.

//Insercao da Imagem online

Aplicativo Completo main.dart

class Galeria extends StatefulWidget {

class _GaleriaState extends State<Galeria> with SingleTickerProviderStateMixin {

style: TextStyle(fontSize: 20.0, color: Colors.black),

Você também pode gostar