如何在main.dart中包含单独的文件

Question

I am barely new at Flutter and try to learn it. I will add codes to my seperate pages and will pull them from main.dart file. First i need to add a gridview to my home page which is main.dart. I am doing something wrong but couldn't find it.

 import 'package:flutter/material.dart'; import './firstpage.dart' ; import './secondpage.dart'; import './thirdpage.dart' ; import './fourthpage.dart'; import './fifthpage.dart' ; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = new TabController(vsync: this, length: 5); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Test App"), backgroundColor: Colors.teal, ), bottomNavigationBar: new Material( color: Colors.teal, child: new TabBar( controller: controller, tabs: <Widget>[ new Tab(icon: new Icon(Icons.home)), new Tab(icon: new Icon(Icons.calendar_today)), new Tab(icon: new Icon(Icons.library_music)), new Tab(icon: new Icon(Icons.camera)), new Tab(icon: new Icon(Icons.more)), ], ), ), body: new TabBarView(controller: controller, children: <Widget>[ new MyApp2(), new SecondPage(), new ThirdPage(), new FourthPage(), new FifthPage(), ]), ); } } 

and i have a firstpage which i am calling from a file named firstpage.dart

 import 'dart:async'; import 'dart:convert'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; Future<List<Photo>> fetchPhotos(http.Client client) async { final response = await client.get('https://jsonplaceholder.typicode.com/photos'); // Use the compute function to run parsePhotos in a separate isolate return compute(parsePhotos, response.body); } // A function that will convert a response body into a List<Photo> List<Photo> parsePhotos(String responseBody) { final parsed = json.decode(responseBody).cast<Map<String, dynamic>>(); return parsed.map<Photo>((json) => Photo.fromJson(json)).toList(); } class Photo { final int albumId; final int id; final String title; final String url; final String thumbnailUrl; Photo({this.albumId, this.id, this.title, this.url, this.thumbnailUrl}); factory Photo.fromJson(Map<String, dynamic> json) { return Photo( albumId: json['albumId'] as int, id: json['id'] as int, title: json['title'] as String, url: json['url'] as String, thumbnailUrl: json['thumbnailUrl'] as String, ); } } class MyApp2 extends StatelessWidget { @override Widget build(BuildContext context) { final appTitle = 'Isolate Demo'; return MaterialApp( title: appTitle, home: MyHomePage2(title: appTitle), ); } } class MyHomePage2 extends StatelessWidget { final String title; MyHomePage2({Key key, this.title}) : super(key: key); @override Widget build(BuildContext context) { return Container( child: FutureBuilder<List<Photo>>( future: fetchPhotos(http.Client()), builder: (context, snapshot) { if (snapshot.hasError) print(snapshot.error); return snapshot.hasData ? PhotosList(photos: snapshot.data) : Center(child: CircularProgressIndicator()); }, ), ); } } class PhotosList extends StatelessWidget { final List<Photo> photos; PhotosList({Key key, this.photos}) : super(key: key); @override Widget build(BuildContext context) { return GridView.builder( gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, ), itemCount: photos.length, itemBuilder: (context, index) { return Image.network(photos[index].thumbnailUrl); }, ); } } 

it seems 2 appbars and there is a gap at top, i am doing something wrong ?

Answer 1

If I have understood you correctly, this is the expected result:

You can find the code below. If I have understood your question correctly, you do not need to wrap MyHomePage2 into a MaterialApp widget. So you do not need the widget MyApp2 unless you have a good reason to use two MaterialApp widgets. Usually, you want to use only one MaterialApp widget in your app.

 import 'package:flutter/material.dart'; import './firstpage.dart' ; import './secondpage.dart'; import './thirdpage.dart' ; import './fourthpage.dart'; import './fifthpage.dart' ; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return new MaterialApp( theme: new ThemeData( primarySwatch: Colors.blue, ), home: new MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => new _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin { TabController controller; @override void initState() { super.initState(); controller = new TabController(vsync: this, length: 5); } @override void dispose() { controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar( title: new Text("Test App"), backgroundColor: Colors.teal, ), bottomNavigationBar: new Material( color: Colors.teal, child: new TabBar( controller: controller, tabs: <Widget>[ new Tab(icon: new Icon(Icons.home)), new Tab(icon: new Icon(Icons.calendar_today)), new Tab(icon: new Icon(Icons.library_music)), new Tab(icon: new Icon(Icons.camera)), new Tab(icon: new Icon(Icons.more)), ], ), ), body: new TabBarView(controller: controller, children: <Widget>[ new MyHomePage2(), new SecondPage(), new ThirdPage(), new FourthPage(), new FifthPage(), ]), ); } }