Flutter - How can I make these Containers to work like a Button?-CodePudding

This is my first App and my first steps in programming. I started with designing the Homepage. Now I want the Containers to act like Buttons, so that I can navigate to other pages. I just can't figure out a way to do so. Maybe u guys got some ideas. Do i have to delete the 5 Containers and add 5 buttons and redesign them? I Think there might be a problem since I wrote the buttons as widget?

The Code so far:

//import 'dart:html';


  import 'package:apptierpark/Anfahrt.dart';
  import 'package:flutter/material.dart';
  void main () => runApp(MaterialApp(home: Tierpark()));

  class Tierpark extends StatelessWidget {
    get assets => null;

    get image => null;

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: PreferredSize(
            preferredSize: Size.fromHeight(60.0),
            child: AppBar(
          title: Text('Tierpark Marzahne',
          style: TextStyle (
            color: Colors.black,
            fontWeight: FontWeight.bold,
            fontSize: 45,
            fontFamily: 'Amatic',
            shadows: [
              Shadow(
                blurRadius: 10.0,
                color: Colors.white,
                offset: Offset(5.0, 5.0),
              )
            ]
          )),
          flexibleSpace: Image(
            image: AssetImage('images/urwald4.jpg'),
            fit: BoxFit.fill,
          ),
          backgroundColor: Colors.transparent,
        ),
        ),

        body: Container(
          decoration: BoxDecoration(
            image: DecorationImage(image: AssetImage('images/bamboo.jpg'), fit: BoxFit.fill)),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: 
          <Widget>[ 
            MenuButton2('Bewohner',),
            SizedBox(height: 50),
            MenuButton2('Parkplan'),
            SizedBox(height: 40),
            MenuButton2('Zeiten & Preise'),
            SizedBox(height: 40),
            MenuButton2('Anfahrt'),
            SizedBox(height: 40),
            MenuButton2 ('Über Uns')
            ] 
            ,)
        ,)
        )
        );
    }
  }





  //Button Mainpage Neu

  class MenuButton2 extends StatelessWidget {
  final String title;
  const MenuButton2(this.title);
  @override
  Widget build(BuildContext context) {
  return Container(
    decoration: BoxDecoration(
      color: const Color(0xFFa9d470),
      border: Border.all(
        color: const Color(0xFFa9d470)
      ),
      borderRadius: BorderRadius.all(Radius.circular(20)),
      boxShadow: [
        BoxShadow(
          color: Colors.black.withOpacity(0.9),
          spreadRadius: 10,
          blurRadius: 12

        )
      ]
    ),
  width: MediaQuery.of(context).size.height*0.38,
  height: MediaQuery.of(context).size.height*0.11,
  child: Align(
    alignment: Alignment.center,
    child: Text (title,
    style: TextStyle(
      fontSize: 50,
      fontFamily: 'Amatic',
      fontWeight: FontWeight.bold
    ),))
  );
  }
  }

CodePudding user response：

Add your Container inside Inkwell or GestureDetector Widgtes refer below code hope its help to you.

CodePudding user response：

Wrap the Container with GestureDetector or InkWell like this and call functions with it's properties,

  class MenuButton2 extends StatelessWidget {
  final String title;
  final int buttonId;
  const MenuButton2(this.title,this.buttonId);
  @override
  Widget build(BuildContext context) {
  return InkWell(
    onTap: () {
    if(buttonId == 1){
    // do 1
    }
    else if(buttonId == 2){
    // do 2
    }
    else if(buttonId == 3){
    // do 3
    }
    else if(buttonId == 4){
    // do 4
    }
    else {
    // do 5
    }
    },
    child:Container(
      decoration: BoxDecoration(
        color: const Color(0xFFa9d470),
        border: Border.all(
          color: const Color(0xFFa9d470)
        ),
        borderRadius: BorderRadius.all(Radius.circular(20)),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.9),
            spreadRadius: 10,
            blurRadius: 12
          )
        ]
      ),
    width: MediaQuery.of(context).size.height*0.38,
    height: MediaQuery.of(context).size.height*0.11,
    child: Align(
      alignment: Alignment.center,
      child: Text (title,
      style: TextStyle(
        fontSize: 50,
        fontFamily: 'Amatic',
        fontWeight: FontWeight.bold
      ),
    ),
   ),
 );
}

And in the place where you call the function do this,

...
<Widget>[ 
  MenuButton2('Bewohner', 1),
  SizedBox(height: 50),
  MenuButton2('Parkplan', 2),
  SizedBox(height: 40),
  MenuButton2('Zeiten & Preise', 3),
  SizedBox(height: 40),
  MenuButton2('Anfahrt', 4),
  SizedBox(height: 40),
  MenuButton2 ('Über Uns', 5)
],
...