J'ai travaillé sur ce projet et actuellement bloqué. J'ai réussi à créer la première image, mais j'ai du mal à intégrer le conteneur contenant le 'NEXT' pour le faire ressembler à la deuxième image. S'il vous plaît, toute aide serait appréciée. Mes codes sont joints ici.

[! [entrez la description de l'image ici] [1]] [1]

[! [entrez la description de l'image ici] [2]] [2]


class GridViewPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          children: [
            HeaderWiget(),
            Expanded(child: Product()),
          ],
        
        ),
      
      ),
    );
  }
}


the 'NEXT' code

Container(
            width: MediaQuery.of(context).size.width,
            padding: const EdgeInsets.symmetric(
              vertical: 16,
            ),
            decoration: BoxDecoration(
              color: Colors.white,
            ),
            child: InkWell(
              onTap: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (context) => GridViewPage()));
              },
              child: Center(
                child: Text('Next',
                    style: TextStyle(
                        fontSize: 22.0,
                        fontFamily: 'Work Sans',
                        fontWeight: FontWeight.w500,
                        color: Color(0XFF161F51))),
              ),
            ),
          ),





  [1]: https://i.stack.imgur.com/w8sfH.png
  [2]: https://i.stack.imgur.com/6dcw1.png



import 'package:flutter/material.dart';
import 'package:signin1/widget/SelectedDont.dart';

class Product extends StatefulWidget {
  @override
  _ProductState createState() => _ProductState();
}

class _ProductState extends State<Product> {
  final listItem = [
    {'Name': 'Hair & Beauty', 'image': 'assets/images/Rectangle15.png'},
    {'Name': 'Wedding planner', 'image': 'assets/images/Rectangle16.png'},
    {'Name': 'Bridal Attire', 'image': 'assets/images/Rectangle17.png'},
    {'Name': 'Catering_1', 'image': 'assets/images/Rectangle18.png'},
    {'Name': 'DJ', 'image': 'assets/images/Rectangle19.png'},
    {'Name': 'Florist', 'image': 'assets/images/Rectangle20.png'},
    {'Name': 'Jewelry', 'image': 'assets/images/Rectangle21.png'},
    {'Name': 'Props', 'image': 'assets/images/Rectangle22.png'},
    {'Name': 'Bridal_Attire', 'image': 'assets/images/Rectangle17.png'},
    {'Name': 'Catering', 'image': 'assets/images/Rectangle18.png'},
  ];

  @override
  Widget build(BuildContext context) {
    return Container(
      child: GridView.builder(
          itemCount: listItem.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          itemBuilder: (BuildContext context, int index) {
            return Container(
                padding: EdgeInsets.all(5.0),
                child: ProductApp(
                  businessName: listItem[index]['Name'],
                  businessImage: listItem[index]['image'],
                ));
          }),
    );
  }
}



This code below is really messing me up. It's a gridview with a checked button and when checked and scroll downward and upward again, it uncheckes itself. This means, the state is dead when i scroll down to give me a new state. How can I fix this?



class ProductApp extends StatefulWidget {
  final businessName;
  final businessImage;
  ProductApp({this.businessName, this.businessImage});
  @override
  _ProductAppState createState() => _ProductAppState();
}

class _ProductAppState extends State<ProductApp> {
  Color color;
  bool isToggle = false;

  @override
  Widget build(BuildContext context) {
    return Card(
      child: Hero(
          tag: widget.businessName,
          child: Material(
            child: InkWell(
              onTap: () {
                setState(() {
                  isToggle = isToggle ? false : true;
                });
              },
              child: GridTile(
                child: Image.asset(
                  widget.businessImage,
                  fit: BoxFit.fitWidth,
                ),
                header: Container(
                  child: ListTile(
                    trailing: SelectedDot(
                        colors: isToggle
                            ? Colors.pink
                            : Colors.black.withOpacity(0.0)),
                    title: Text(
                      widget.businessName,
                      style: TextStyle(
                          fontWeight: FontWeight.w500,
                          color: Colors.white,
                          fontSize: 12.0),
                    ),
                  ),
                ),
              ),
            ),
          )),
    );
  }
}

1
Dennis 19 oct. 2020 à 09:37

3 réponses

Meilleure réponse

Vous pouvez le faire avec le widget 'Stack' comme ci-dessous.
Voici un code complet.

enter image description here

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Stack(
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              Container(
                height: 50,
                color: Colors.yellow,
                child: Text(
                  'header',
                  textAlign: TextAlign.center,
                ),
              ),
              Expanded(child: Container(color: Colors.green)),
            ],
          ),
          Positioned(
            child: Align(
              alignment: Alignment.center,
              child: _buildButton(),
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildButton() {
    return Container(
      width: MediaQuery.of(context).size.width,
      padding: const EdgeInsets.symmetric(
        vertical: 16,
      ),
      decoration: BoxDecoration(
        color: Colors.red,
      ),
      child: InkWell(
        onTap: () {
          // Navigator.push(
          //     context, MaterialPageRoute(builder: (context) => GridViewPage()));
        },
        child: Text(
          'Next',
          textAlign: TextAlign.center,
          style: TextStyle(
            fontSize: 22.0,
            fontFamily: 'Work Sans',
            fontWeight: FontWeight.w500,
            color: Color(0XFF161F51),
          ),
        ),
      ),
    );
  }
}
0
KuKu 19 oct. 2020 à 06:56

Vous pouvez utiliser le Stack Widget pour intégrer le conteneur dans votre code.

0
Asad Rehman 19 oct. 2020 à 06:47